Webpack

基本安装

初始化项目

npm init -y
//生成package.json,并且一路同意,如果没啥个性化的内容则省了你一路狂按enter

安装webpack

npm install --save-dev webpack
//安装到开发环境里面(devDependicies)

新建文件webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js', // 这里应用程序开始执行,webpack 开始打包
  output: {
    // webpack 如何输出结果的相关选项
    filename: 'bundle.js',//输出资源块的名字(asset chunk)
    path: path.resolve(__dirname, 'dist') // 所有输出文件的目标路径,我的就是./dist/bundle.js
  }
};

可以有多个入口(entry)

entry: {
    scss: './src/css/main.scss',  //对象的键名scss 就是输出文件的name
    bundle: './src/js/app.js'
  },
   
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, 'dist/js')
    // publicPath: "/output/"
  },

上述代码会在dist/js目录下生成scss.js和bundle.js

path

其中，配置文件的第一行代码使用了Node的内置模块path,并且在它前面加上 __dirname这个全局变量。可以防止不同操作系统之间的文件路径问题，并且可以使相对路径按照预期工作。
即使你的index.js内容为空，bundle.js里面也有一些基本的打包代码。

基本的使用

//第一种方法，使用当前目录的node_modules里面的webpack
./node_modules/.bin/webpack 
//第二种方法使用npm脚本
//首先在你的package.json里面添加下列代码
{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}
//然后，使用下列代码即可
npm run bulid
//第三种方法，高版本的npm自带了npx
npx webpack //npx会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装！

babel-loader

ES6或其他版本js转换成通用js代码，毫无疑问应该使用babel，不过在webpack的世界里面统一使用loader。
loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

安装

npm install --save-dev babel-loader babel-core babel-preset-env webpack

配置文件

//依然属于webpack.config.js配置的一部分，
module: {
  //这是关于模块的配置
  rules: [
    //模块规则（配置 loader、解析器等选项）
    {
      test: /\.js$/, //使用正则判断后缀是js的文件
      exclude: /(node_modules|bower_components)/, 
      //除了这两目录下的node_modules|bower_components
      use: {
        loader: 'babel-loader', //用这个loader处理.js的文件
        options: {
          presets: ['env'] //选项，还记得单独使用babel的时候建立的那个.babelrc嘛，就是那个作用。
        }
      }
    }
  ]
}

可以得到loader的两个作用：

• 识别出应该被对应的 loader 进行转换的那些文件。(使用 test 属性)
• 转换这些文件，从而使其能够被添加到依赖中（并且最终添加到 bundle 中）(use 属性)
  在./src/js/有module-1.js、module-2.js、app.js三个文件，都是新的语法，用的模块化写法，有的浏览器不支持，所以需要转化。

//module-1.js代码
function fn(){
  console.log(1)
}

export default fn
//module-2.js
function fn(){
  console.log(2)
}

export default fn
//app.js
import x from './module-1.js'
import y from './module-2.js'
x()
y()

sass-loader

使用了预编译的scss语言，把scss文件变成css并加入到html里面

安装

npm install sass-loader node-sass webpack --save-dev

配置文件

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
        }]
    }
};

• 先用sass-loader把./src/csa/main.scss编译成main.css
• 再用css-loader把main.css变成符合CommonJS规范的
• 把main.css变成js字符串，并创建style节点，把它放进去，这样html就可以显示啦。

plugins

plugins: [
    new CopyWebpackPlugin([ {
      //原来一个plugin就是一个对象啊，使用的时候实例化对象即可
      from: 'src/index.html', //从src/index.html目录下复制
      to: '../index.html',  //到dist/index.html
      toType: 'file' //复制类型是文件
    }], { copyUnmodified: true }) //把未修改的部分也复制过去
  ]

postcss-loader解决兼容性问题

安装
npm i -D postcss-loader

配置文件postcss.config.js

module.exports = {
    plugins: {
        'postcss-preset-env': {},
        'cssnano': {}
    }
}