1 let path = require(‘path‘); //系统自带模块 2 let HtmlWebpackPlugin = require(‘html-webpack-plugin‘); 3 const openBrowserWebpackPlugin = require("open-browser-webpack-plugin"); // 打开浏览器 4 const extractTextWebpackPlugin = require("extract-text-webpack-plugin") // 抽离样式 样式独立出去 5 module.exports = { 6 entry: ‘./src/main.js‘, //入口，打包js总出口 7 output: { //出口设置 8 filename: ‘index[hash].js‘, //打包后名字,插手hash制止缓请安题也可不加,[hash:8]为八位数 9 path: path.resolve(__dirname, ‘dist‘) //打包后路径path.resolve为相对路径转绝对路径要领，dirname暗示当前文件夹位置，可不加。 10 }, 11 mode: ‘development‘, //暗示模式development是开发模式production是出产模式。 12 devServer: { //用ip端口访谒打包后文件且具备热替换成果实时更新，需用到webpack-dev-server包 13 host: "0.0.0.0", 14 port: 3000, //端标语 15 progress: true, //显示打包进度条 16 contentBase: path.join(__dirname, "dist"), //端口执行的打包后文件夹path.join拼接当前路径加文件名, 17 compress: true, //gzip压缩文件 18 proxy:{ // 代办代理 19 ‘/aaa‘: { 20 target: `http://`,//需要跨域api地点，前面aaa则api会请求...jw/aaa地点 21 changeOrigin: true,//如果是请求域名需配置（须要） 22 pathRewrite: { 23 [‘^‘ + ‘/aaa‘]: ‘‘//重写api路径替换了aaa为空值 24 }, 25 ws: false//是否使用websocket 26 } 27 }, 28 }, 29 plugins: [ //安排所有webpack插件 30 new HtmlWebpackPlugin({ //html插件 31 template: ‘./src/index.html‘, //HTML出口 32 filename: ‘index.html‘, //打包后名字 33 minify: { 34 collapseWhitespace: true, //html打包成一行 35 }, 36 hash: true, //引入js文件加hash戳 37 inject: true, // 自动注入 css/js link script 38 }), 39 new openBrowserWebpackPlugin({ 40 url: "http://localhost:7000" 41 }), 42 43 new extractTextWebpackPlugin({ 44 filename: ‘css/app.[hash:8].css‘, 45 allChunks: true, // 抽离所有的数据 46 disable: false // true 无法样式抽离 47 }) 48 ], 49 module: { //模块 50 rules: [ //打包法则，差别文件依赖差别，use为依赖 51 { 52 test: /\.js$/, 53 exclude: /node_modules/, //不包孕该文件夹 54 use: [‘babel-loader‘] 55 }, 56 { 57 test: /\.(png|gif|svg|jpg|woff|woff2|eot|ttf)\??.*$/, 58 use: ["url-loader?limit=8192&name=font/[hash:8].[name].[ext]"] // 8M ext扩展名 59 }, 60 { 61 test: /\.(css|scss)$/, 62 use: extractTextWebpackPlugin.extract({ 63 fallback: "style-loader", // 转化为 node 气势派头代码 64 use: ["css-loader", // css 转化为 commonJs模块 65 { 66 loader: "postcss-loader", // 模块 67 options: { 68 plugins: function () { 69 return [ 70 require("cssgrace"), // 美化 css 71 require("autoprefixer")() // 自动补全 实现兼容 72 ] 73 } 74 } 75 }, 76 "sass-loader" // 编译 scss 为 css 代码 77 ], 78 }) 79 }, 80 { 81 test: /\.(css|less)$/, 82 use: extractTextWebpackPlugin.extract({ 83 fallback: "style-loader", // 转化为 node 气势派头代码 84 use: ["css-loader", // css 转化为 commonJs模块 85 { 86 loader: "postcss-loader", // 模块 87 options: { 88 plugins: function () { 89 return [ 90 require("cssgrace"), // 美化 css 91 // require(‘postcss-px2rem-exclude‘)( 92 // { 93 // remUnit:100, 94 // exclude:/element-ui/i, // 排除 mint-ui 不需要进行 rem 转换 95 // } 96 // ), // px 转 rem 97 require("autoprefixer")() // 自动补全 实现兼容 98 ] 99 } 100 } 101 }, 102 "less-loader" // 编译 scss 为 css 代码 103 ], 104 }) 105 }, 106 ] 107 } 108 }

涉及npm包如下：

 "devDependencies": {

    "autoprefixer": "^9.4.3",

    "babel-core": "^6.26.3",

    "babel-loader": "^7.1.5",

    "babel-plugin-transform-object-rest-spread": "^6.26.0",

    "babel-preset-env": "^1.7.0",

    "css-loader": "^3.4.2",

    "cssgrace": "^3.0.0",

    "extract-text-webpack-plugin": "^4.0.0-beta.0",

    "html-webpack-plugin": "^3.2.0",

    "less-loader": "^5.0.0",

    "open-browser-webpack-plugin": "^0.0.5",

    "postcss-loader": "^3.0.0",

    "node-sass": "^4.11.0",

    "sass-loader": "^8.0.2",

    "style-loader": "^1.1.3",

    "webpack": "^4.41.5",

    "webpack-cli": "^3.3.10",

    "webpack-dev-server": "^3.10.2"

  }

整理的对照根本的webpack，代码按照需求引入，如果有错误请奉告我以便及时进行变动

webpack根基配置附带说明