webpack入门指南二

零配置是很鸡肋的，webpack有一个默认的配置⽂件，叫webpack.config.js，我们可以对这个文件进⾏个性化配置；如果使⽤默认的配置文件webpack.config.js在这里修改如果不使⽤⾃定义配置⽂件： 自定义webpackconfig.js，可以通过–config webpackconfig.js来指定webpack使⽤哪个配置⽂件来执⾏构建
webpack.config.js配置基础结构

module.exports = {
 entry: "./src/index.js", //打包⼊⼝⽂件
 output: "./dist", //输出结构
 mode: "production", //打包环境
 module: {
 rules: [
 //loader模块处理
 {
 test: /\.css$/,
 use: "style-loader"
 }
 ]
 },
 plugins: [new HtmlWebpackPlugin()] //插件配置
};

入口文件：

指定webpack打包⼊⼝⽂件:Webpack 执⾏构建的第⼀步将从
Entry 开始，可抽象成输⼊

//单⼊⼝ SPA，本质是个字符串
entry:{
 main: './src/index.js'
}
==相当于简写===
entry:"./src/index.js"
//多⼊⼝ entry是个对象
entry:{
 index:"./src/index.js",
 login:"./src/login.js"
}

出口文件
打包转换后的⽂件输出到磁盘位置:输出结果，在 Webpack 经过⼀
系列处理并得出最终想要的代码后输出结果

output: {
 filename: "bundle.js",//输出⽂件的名称
 path: path.resolve(__dirname, "dist")//输出⽂件到
磁盘的⽬录，必须是绝对路径
},
 
//多⼊⼝的处理
output: {
 filename: "[name][chunkhash:8].js",//利⽤占位符，
⽂件名称不要重复
 path: path.resolve(__dirname, "dist")//输出⽂件到
磁盘的⽬录，必须是绝对路径
},

构建环境

设置mode可以⾃动触发webpack内置的函数，达到优化的效果，三种mode:production;development;none
development阶段的开启会有利于热更新的处理，识别哪个模块变化;
production阶段的开启会有帮助模块压缩，处理副作⽤等⼀些功能;

loader

loader是指模块转换器，⽤于把模块原内容按照需求转换成新内
容，因为webpack 默认只⽀持.json 和 .js模块 不⽀持 也不认识其他格式的模
块，⽽模块不仅仅是js，还可以是css，图⽚或者其他格式的文件；webpack默认只知道如何处理js和json模块，那么其他格式的模块处理就需要loader;

模块

在 webpack ⾥⼀切皆模块，⼀个模块对应着⼀个⽂件。webpack 会从配置的 entry 开始递归找出所有依赖的模块。当webpack处理到不认识的模块时，需要在webpack中的module处进⾏配置，当检测到是什么格式的模块，使⽤什么loader来处理

module:{
 rules:[
 {
 test:/\.xxx$/,//指定匹配规则
 use:{
 loader: 'xxx-load'//指定使⽤的loader
 }
 }
 ]
}

loader 处理webpack不⽀持的格式⽂件，loader是有执⾏顺序，⼀个loader只处理⼀件事情；

Plugins

作⽤于webpack打包整个过程；plugin 可以在webpack运⾏到某个阶段的时候，帮你做⼀些事情，类似于⽣命周期的概念；
自定义插件，在 webpack 构建流程中的特定时机注⼊扩展逻辑来改
变构建结果或做你想要的事情。

sourceMap

源代码与打包后的代码的映射关系，通过sourceMap定位到源代
码。在dev模式中，默认开启，关闭的话 可以在配置⽂件⾥

devtool:"none"

配置推荐

devtool:"cheap-module-eval-source-map",// 开发环境配置
//线上不推荐开启
devtool:"cheap-module-source-map", // 线上⽣成配置

WebpackDevServer

每次改完代码都需要重新打包⼀次，打开浏览器，刷新⼀次，很麻
烦,我们可以安装使⽤webpackdevserver来改善这块的体验

 npm install webpack-dev-server -D
 

修改下package.json

"scripts": {
 "server": "webpack-dev-server"
 },

在webpack.config.js配置：

devServer: {
 contentBase: "./dist",
 open: true,
 port: 8000
 },

启动服务

npm run server

启动服务后，会发现dist⽬录没有了，这是因为devServer把打包后
的模块不会放在dist⽬录下，⽽是放到内存中，从⽽提升速度；
此外还可以解决跨域：
联调期间，前后端分离，直接获取数据会跨域，上线后我们使⽤
nginx/node做代理转发，开发期间，webpack就可以搞定这件事；
修改webpack.config.js 设置服务器代理：

proxy: {
 "/api": {
 target: "http://localhost:8001"
 }
 }