webpack 3.0

一.package.json配置
1."dev": "webpack-dev-server --config webpack.config.js --inline --hot --progress  --colors --port=1000"

npm install --save-dev webpack-dev-server

webpack-dev-server：熱更新模塊

--port=1000  改變端口號

npm run dev 便可

二.入口和出口文件配置


三.webpack.config.js配置
1.建立文件夾 初始化package.json 下載webpack
　　mkdir webpack-demo && cd webpack-demo 　　 npm init -y

    npm install -g webpack

　　npm install --save-dev webpack

2.scss

　　npm install style-loader css-loader sass-loader node-sass webpack --save-dev
　　
　　module.exports = {

       ...

       module: {

           rules: [{

               test: /\.scss$/,

               use: [{

                   loader: "style-loader" // creates style nodes from JS strings 

               }, {

                loader: "css-loader" // translates CSS into CommonJS 

               }, {

                   loader: "sass-loader" // compiles Sass to CSS 

               }]

           }]

       }

      };

3.使用es6語法
　　
npm install --save-dev babel-loader babel-core babel-preset-env

module: {

  rules: [

    {

      test: /\.js$/,

      exclude: /(node_modules|bower_components)/,

      use: {

        loader: 'babel-loader',

        options: {

          presets: ['env']

        }

      }

    }

  ]

}