【学习日记】webpack配置文件分析（dev）2020-8-15

1、webpack.base.conf.js

基础的webpack配置文件，配置一些dev和prod模式共有的属性。

2、webpack.dev.conf.js

配置一些dev模式特有的属性，使用webpack-merge与webpack.base.conf.js里的配置合并

3、整合后的dev模式配置文件：

3.1、entry：

//webpack.base.conf.js中
entry: {
        app: './src/main.js'
    },
    
//webpack.dev.conf.js中,对入口文件的js加上dev-client里的内容，一起打包实现热更新
Object.keys(baseWebpackConfig.entry).forEach(function(name) {
    baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})

//其中dev-client.js如下，作用是集成到客户端js中，作为socket客户端js，响应到服务器通知，刷新页面
require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?path=http://localhost:8003/#/home/__webpack_hmr&noInfo=true&reload=true')

hotClient.subscribe(function(event) {
	if (event.action === 'reload') {
		window.location.reload()
	}
})

！！注意！！
如果dev-client里path的路径不全，可能出现：

所以需要写全path的路径：path=http://localhost:8003/#/home/__webpack_hmr

var hotClient = require('webpack-hot-middleware/client?path=http://localhost:8003/#/home/__webpack_hmr&noInfo=true&reload=true')

3.2、output

output: {
        path: config.build.assetsRoot,
        publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,//资源的发布地址
        filename: '[name].js'
    },

path和publicPath的区别

path：使用webpack命令的打包输出路径，会显示在项目目录里，如果内容修改需要手动重新npx webpack。
publicPath：使用webpack-dev-server命令的打包输出路径，在内存中，不会显示在项目目录里，启动一个web服务，通过websocket实现实时编译。

3.3、loader

loaders: [
     { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader
     { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理 less 文件的 loader
     { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader
    { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理图片路径的 loader，limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的图片，大于或等于给定的limit值，则不会被转为base64格式的字符串， 如果图片小于给定的limit值，则会被转为base64的字符串
    { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理字体文件的 loader
    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
     {
       test: /\.vue$/,
       loader: "vue-loader",
       options: {
         loaders:{
              scss:"style-loader!css-loader!sass-loader",
              sass:"style-loader!css-loader!sass-loader?indentedSyntax"
         }
      }
   }
]

3.4、resolve、resolveLoader

resolve: {//用来解析第三方包
    extensions: ['.js', '.vue', '.less', '.css', '.scss'],//扩展名顺序，先找js，再找vue。。。
    modules:  [path.join(__dirname, '../node_modules')],//在root里找不到【这里没有root】会去node_modules里找
    alias: {//别名，require（vue$），就说明是require vue/dist/vue.common.js
        'vue$': 'vue/dist/vue.common.js',//不存在
        'src': path.resolve(__dirname, '../src'),
        'assets': path.resolve(__dirname, '../src/assets'),//不存在
        'components': path.resolve(__dirname, '../src/components')//src和components常用
    }
},
resolveLoader: {//用来解析loader
    modules: [path.join(__dirname, '../node_modules')]在root里找不到会去node_modules里找
},

3.5、plugin

plugins: [
    new webpack.DefinePlugin({//定义环境变量
        'process.env': config.dev.env//"process.env"-----》config.dev.env-----》NODE_ENV: '"development"'
    }),
    // new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),//实现热更新，刷新浏览器必写
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
        filename: 'index.html',//最后生成的html文件名为index.html，在打包后的文件夹elm里
        template: 'index.html',//index.html为html模版，打包后的css和js都挂载在index.html里
        favicon: 'favicon.ico',//给生成的 html 文件生成一个 favicon。属性值为 favicon 文件所在的路径名
        inject: true//script标签位于html文件的 body 底部【还可以设置title等】
    })
]

3.6、devSever

 devServer: {
     port:8003,
     contentBase:"./item"
 },