webpack4.0 基础知识

1. webpack基础配置

webpack4.0必须安装webpack和wabpck-cli

webpack可以0配置，它默认支持js模块化，因此可以使用commonjs语法

1.基础配置项

配置文件的默认名为webpack.config.js或者webpackfile.js，（自定义名称的话可再命令中添加config参数）

• entry(入口)
  Sring | Array | Object
• output

output:{
    filename: 'bundle.js',   // 打包后的文件名
    path: path.resolve(__dirname, 'dist')   // 路径必须是绝对路径，（先引入path模块）
  }

• module
• mode
  • development/production

2.webpack打包出的文件解析

3.Html插件

• webpack-dev-server //模拟线上环境（不会真实打包，在内存中打包），在webpack.config.js文件中的对应字段为devServer

devServer: {
    port: 3000,
    progress: true,  //  打包进度条
    contentBase: './dist',  //根地址对应路径
    compress: true  // 是否启用gzip压缩
  },

• html-webpack-plugin // html相关的插件

plugins: [  //放着所有的webpack插件
   new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      minify: {
        removeAttributeQuotes: true,
        collapseWhitespace: true
      },
      hash: true
    })
]

4.模块处理（或者.vue，.js等等文件）

主要用于处理非js模块（es6 to es5），需要在module中配置相应处理规则和加载器，以下，先以样式处理为例子

module: {
    rules: [
      {
        test: /\.scss$/,  // sass-loader node-sass, less less-loader, stylus stylus-loader
        use: [
          {
            loader: 'style-loader',
            options: {
              insertAt: 'top'
            }
          },
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },

style-loader会把样式以