webpack基本配置附带说明

Posted 2021-03-11 不太聪明的YA子

  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，代码根据需求引入，如果有错误请告知我以便及时进行更改