基础

webpack配置文件: webpack.config 也可通过webpack —config 指定配置文件

常见的loaders

babel-loader 转换ES6,ES7等js新特性语法
css-loader 支持css文件的加载和解析
less-loader 将less文件转换成css
ts-loader 将ts转换成js
file-loader 将图片字体进行打包
raw-loader 将文件以字符串的形式导入
thred-loader 多进程打包js和css

常用的plugins

commonsChunkPlugin 将chunks相同的模块代码提取成公共js
cleanWebpackPlugin 清理构建目录
ExtractTextWebpackPlugin 将css从bunlde文件里提取成一个独立的css文件
CopyWebpackPlugin 将文件或者文件夹拷贝到构建的输出目录
HtmlWebpackPlugin 创建html文件去承载输出的bundle
UglifyjsWebpackPlugin 压缩js
ZipWebpackPlugin 将打包出的资源生成一个zip包

解析es6

  1. 使用babel-loader babel的配置文件是 .babelrc ```javascript // webpack.config.js // npm i @babel/core @bable/preset-env babel-loader module.export = { entry: ‘src/index.js’, output: ‘dist/index/js’, mode: ‘production’, module: { rules: [ {
    1.  test: /.js$/,
    2.  use:  'babel-loader'
    } ] } }

//.babelrc { “presets”:[ “@babel/preset-env” ] }

  1. <a name="WYeGb"></a>
  2. #### 解析react jsx
  3. ```javascript
  4. //.babelrc
  5. // npm i react react-dom @babel/preset-react
  6. {
  7.   "presets":[
  8.     "@babel/preset-env",
  9.     "@babel/preset-react"
  10.   ],
  11.   "plugins": [
  12.     "@babel/proposal-class-properties"
  13.   ]
  14. }

解析css,less,sass

1.使用css-loader 用于加载.css文件 并转成commonjs对象
2.style-loader将样式通过