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://www.xxx.jw`,//需要跨域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，代码根据需求引入，如果有错误请告知我以便及时进行更改