webpack基本配置

项目目录如下图：

webpack.config.js如下：

​
var path = require('path');
/*由于webpack plugins是在webpack中，所以引用webpack*/
var webpack = require('webpack');

module.exports = {
    mode: 'none',/*webpack中必加，否则报错*/
    entry: {
        admin: './admin/index.js',
        consumer: './consumer/index.js'
    },
    plugins: [
        /*插件*/
    ],
    /*打包的配置output(分为三个部分)*/
    output: {
        path: path.join(__dirname, 'dist'),//打包的文件所放的文件夹
        publicPath: "/dist/",//去哪找打包的文件
        filename: '[name].bundle.js',//最后打包的文件名称,此项目是两个js文件，所以用[name],打包完之后是admin.bundle.js和consumer.bundle.js
    },
    module: {
        // noParse: [/jquery/],//提升性能，大的第三方包能不打包的就不打包进去
        rules: [
        /*{
            test: /\.png$/,
            use:{
                loader: 'file-loader',
            }
        },*/
        {
            test: /imgs/,
            use:{
                loader: 'file-loader',//文件路径
            }
        },{
            test: /icons/,
            use:{
                loader: 'url-loader',//base64
            }
        },{
            test: /\.css$/,
            use: [{
                loader: 'style-loader'
            },{
                loader: 'css-loader'
            }]
        },{
            test: /\.scss$/,
            use: [{
                loader: 'style-loader'
            },{
                loader: 'css-loader'
            },{
                loader: 'sass-loader'
            }]
        },{
            test: /\.js$/,
            exclude: /node_modules/,
            // include: /(admin|consumer)/,
            use:{
                loader: 'babel-loader',
            }
        }]
       
    }
};
/*由于打包出的文件有很多注释 还有空行 所以打包出来的文件会很大 new webpack.optimize.UglifyJsPlugin()该方法已被移除*/
/*webpack plugins*/
/*https://webpack.js.org/concepts/plugins/*/

​

package.json如下：

{
  "name": "shopping",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open --process --colors --hot --inline -d",
    "build-dev": "webpack --mode development",
    "build-pro": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.29.0",
    "webpack-dev-server": "^3.1.14"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "node-argv": "0.0.7",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.1.1",
    "url-loader": "^1.1.2",
    "webpack-cli": "^3.2.1"
  }
}

后续有时间再填详解啦......