webpack4 学习 0-1

为什么需要构建工具？

1.转换 ES6 语法
2.转换 JSX
3.CSS 前缀补全/预处理器
4.压缩混淆
5.图片压缩

初识 webpack: 配置文件名称

 webpack 默认配置文件：webpack.config.js
 
 可以通过 webpack --config 指定配置文件  
 

初识 webpack：webpack 配置组成

module.exports = {
    entry: './src/index.js',   // 打包的入口文件
    output: './dist/main.js',  // 打包的输出
    mode: 'production',  // 运行环境
    module: {
        rules: [  // Loader 配置
            { test: /\.txt$/, use: 'raw-loader' }
        ]
    },
    plugins: [  // 插件配置 插件数组是可以放多个插件的
        new HtmlwebpackPlugin({
            tempalte: './src/index.html'
        })
    ]
}

webpack 4.0 说是 webpack 是零配置的 包含了 entry 默认为 ./src/index.js output 默认为 ./dist/main.js

初始化 webpack npm init -y

安装 webpack 跟 webpack-cli npm i webpack webpack-cli -D 这里我学习的是 webpack 4.0 所以要手动指定版本

./node_modules/.bin/webpack -v 查看 webpack 版本号 其实也可以直接去 json 文件中去找对应的版本号

"use strict" 严格模式

这里补充下 require require 是 nodejs 中的 commonjs 中模块应用

在调用方法的文件里应该是 module.exprts = {}

 *commonjs*
 index.js
    module.exprts = {
      function add() {
        console.log(111)
      }
    }
    // 调用
    hello.js
    const add require(./index)

es6

import foo from "./index"

foo.xx .... // 执行

export add { function xx() { console.log(222) } }

这些说明了 export default 与 export 的区别

nodejs 中必须要使用 es6 语法导入 需要版本在 13.x 以上才支持使用

打包是要执行 ./node_modules/.bin/webpack 这样去打包 明天在看如何用 npm run build 去执行 ./node_modules/.bin/webpack