webpack深入配置详解

一、webpack是什么？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

a:模块化，让我们可以把复杂的程序细化为小的文件;

b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；

c:scss，less等CSS预处理器

二、使用步骤

1.创建文件vue.config.js

这个文件名是固定的，也可以改配置再修改该文件名

2.配置webpack

代码如下（示例）：

const path = require('path');
const resolve = dir => path.join(__dirname, dir);

module.exports = {
	//入口文件，一般为main.js
	entry: './main.js',
    // 基本路径
    //publicPath: './',
    // 输出文件目录
    //outputDir: 'dist',
    output: {
   		//相当于publicPath，打包生成的文件路径
	    path: path.resolve(__dirname, 'dist'),
	    //相当于outputDir，打包生成的文件名称
	    filename: 'my-first-webpack.bundle.js'
    },
    // load处理器
    module: {
	    rules: [
	   	 // test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
	   	 // use 属性，表示进行转换时，应该使用哪个 loader。
	      { test: /\.txt$/, use: 'raw-loader' }
	    ]
    },
    // 插件
    plugins: [
   		new HtmlWebpackPlugin({template: './src/index.html'})
    ],
    // 通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化
    mode: 'production',
    // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
    productionSourceMap: false,
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // webpack配置别名
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('src'))
    },
    devServer: {
        // 本地ip地址
        host: 'localhost',
        port: 2333,
        open: true,
        /* 使用代理 */
        proxy: {
            '/api': {
                /* 目标代理服务器地址 */
                target: 'http://192.168.1.126:8080/',
                /* 允许跨域 */
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
	lintOnSave: false, // eslint-loader 是否在保存的时候检查
};

总结

good night