This rookie build entry level Webpack environment, only for reference, Webpack learning essence is not easy, each plug-in author has their own ideas. Wait till I know it all. As soon as I perfect it, for now

  • To extract the image
  • The server environment supports cross-domain hot updates
  • ES6 syntax degradation
  • Turn less es6
Var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
// 
var webpack = require('webpack'); Var ExtractTextPlugin = require("extract-text-webpack-plugin"); // After the ProvidePlugin instance initialization, import and require will no longer be required. Var providePlugin = new webpack.providePlugin ({$:'jquery', jQuery: 'jquery'.'window.jQuery': 'jquery'}); Module. exports = {entry: {// exports = {entry: {'./src/js/index.js',
        goodsInfo: './src/js/goodsInfo.js'}, output: {'[name].js',
        path: __dirname + '/out',
        publicPath: 'http://localhost:8080/out'
    },
    module: {
        rules: [
            { test: /.js$/, use: ['babel-loader'}, //js syntax degraded // {test: /.css$/, use: ['style-loader'.'css-loader'] }, //css
            {
                test: /.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"})}, {test: /.jpg|png|gif|svg$/, use: ['url-loader? limit=8192&name=./[name].[ext]'}, // Set the size name and extension {test: /.less$/, use: ['style-loader'.'css-loader'.'less-loader'] }
        ]
    },
    plugins: [
        new UglifyJSPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: "commons",
            filename: "commons.js",
            minChunks: 2
        }),
        new ExtractTextPlugin("[name].css"),
        providePlugin
    ],
    devServer: {
        quiet: false// The console does not output packaged information open:true// Open the browser noInfo:false,
        hot: true, // Enable hot inline:true// Enable automatic page refreshfalse// do not start lazy loading progress:trueWatchOptions: {aggregateTimeout: 300}, port:'8088'Proxy: {// cross-domain'/api': {
                target: 'http://localhost:80'// Target server ws:true// Enable websocket changeOrigin:true// Enable proxy pathRewrite: {'^/api': '/api'// the request will go to http://localhost:80/api}}}}}Copy the code

Package. The json file

{
  "name": "webpack1"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."duyi": "webpack-dev-server --devtool eval-source-map --progress --colors"
  },
  "author": ""."license": "ISC"."dependencies": {
    "babel": "^ 6.23.0"."babel-core": "^ 6.26.0"."babel-loader": "^ 7.1.3." "."css-loader": "^ 0.28.10"."file-loader": "^ 1.1.9"."style-loader": "^ 0.20.2"."uglifyjs-webpack-plugin": "^ 1.2.2." "."url-loader": "^ 0.6.2"."webpack": "^ 2.6.2"
  },
  "devDependencies": {
    "extract-text-webpack-plugin": "^ 3.0.2." "."jquery": "^ 3.3.1"."less": "^ 3.0.1." "."less-loader": "^ 4.0.6"}}Copy the code