Webpack various Babel transcoding

Today, summarize the webpack of various transcoding tools. First, the basic command:

      Webpack         //The most basic method of initiating Webpack
      webpack-w      //providing watch method; packaging updates in real time
      webpack-p      //compressing
      the packaged files Webpack-d      //provide source map for easy mode code

Second, ES6 transfer code ES5

    Install Babel-loader: 
    # npm Install babel-loader--save-dev

    installation transcoding rules:       
    # NPM Install babel-preset-es2015- Save-dev

    Webpack invokes the Babel API for transcoding:
    # npm Install--save-dev babel-core ES7

    The different stages of the syntax proposal of the transcoding rules (a total of 4 stages), select a
    # 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

   Reference:
   module:{
      rules:[
          {
            test:/\.js$/,
            exclude:/(node_modules|bower_components)/,//Prevent node JS transcoding in _modules
            use:[' Babel-loader ',]
          }
   

Key content: Also create a new. babelrc file in the directory that says:

{' Presets ': [' es2015 ']}

If you do not want to create a new file, the module in Webpack.config.js can do this:

module:{
      rules:[
          {
            test:/\.js$/,
            exclude:/(node_modules|bower_components)/,//Prevent node_modules JS transcoding in use
            : [
                    {
                        loader: ' Babel-loader ',
                        options: {
                            presets: [' es2015 ']
                        }}, 
             ]
          },
      ]
   }

Second, CSS packaging to JS

Installation:

NPM Install--save-dev Style-loader css-loader

Webpack.config.js:

Module: {
     rules: [
       {
         test:/\.css$/, use
         : [
           ' Style-loader ',
           ' Css-loader '
         ]
       }
     ]
 }

Js:

Import ' Your style '

Third, less compilation

Installation:

NPM Install Save-dev less Less-loader

Webpack.config.js:

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

Import less file in JS.