webpack 各种babel 转码

今天总结一下webpack 各种转码工具 的操作方法。

一、基本命令：

      webpack         // 最基本的启动webpack的方法      webpack -w      // 提供watch方法；实时进行打包更新      webpack -p      // 对打包后的文件进行压缩      webpack -d      // 提供source map，方便调式代码

二、ES6 转码 ES5

    安装 babel-loader：     # npm install babel-loader --save-dev    安装转码规则：           # npm install babel-preset-es2015 --save-dev    webpack调用Babel的API进行转码:    # npm install --save-dev babel-core    ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个    # npm install --save-dev babel-preset-stage-0    # npm install --save-dev babel-preset-stage-1    # npm install --save-dev babel-preset-stage-2    # npm install --save-dev babel-preset-stage-3   webpack.config.js 参考：   module:{      rules:[          {            test:/\.js$/,            exclude: /(node_modules|bower_components)/, // 防止将node_modules 中的js 转码            use:['babel-loader',]          },      ]   }

重点内容： 还要在目录中新建一个 .babelrc 文件，里面写上：

{ "presets": [ "es2015" ] }

如果不想新建这个文件，那么webpack.config.js 中 module 可以这样做：

module:{      rules:[          {            test:/\.js$/,            exclude: /(node_modules|bower_components)/, // 防止将node_modules 中的js 转码            use: [                    {                        loader: 'babel-loader',                        options: {                            presets: ['es2015']                        }                    },              ],          },      ]   }

二、css打包到js

安装：

npm install --save-dev style-loader css-loader

webpack.config.js:

 module: {     rules: [       {         test: /\.css$/,         use: [           'style-loader',           'css-loader'         ]       }     ] }

js:

import 'your style'

三、less编译

安装：

npm install save-dev less less-loader

webpack.config.js:

  {    test:/\.less$/,    use:["style-loader",'css-loader','less-loader']  }

在js里import 导入 less文件。