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文件。