使用webpack打包网站项目需要用到的配置

package.json

通过node的命令来执行编译

"scripts": {
    "dev": "webpack --config webpack.config.dev.js --mode development",
    "build": "webpack --config webpack.config.pro.js --mode production"
  }

webpack.config.js

webpack的默认配置文件

mode:  'production',  // 运行模式，有三种 'development'、'production'、'none'
entry: {  // 入口文件的配置，可以配置多个入口文件
  main: './src/index.js',
  page: './src/page.js'
}，
module: {  // 识别非js文件的模块配置
  rules: [
    {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name].[ext]'，
            outputPath: 'images/',
            limit: 2048
          }
        }
     }
  ]
},
output: { // 打包输出文件的配置
  filename: '[name].js'   // 按入口文件命名打包后输出的文件
}

loader篇

文件 loader

url-loader // file-loader的升级版，可以将容量小的图片转化为base64格式

css loader

style-loader
css-loader
sass-loader
postcss-loader

plugin篇