webpack配置整理

通过定义配置文件进行复杂操作，文件名webpack.config.js

一个配置文件的基本结构：

entry，入口定义入口文件，默认文件./src/index.js

output，输出定义出口文件，默认文件./dist/main.js

resolve，解析路径映射，省略后缀名等

module，模块定义不同loader，让webpack能够处理非JavaScript模块

plugins，插件扩展webpack功能

devServer，开发服务器用于配置webpack-dev-server选项

简单的配置文件

hello wrold例子：

修改webpack.json文件

配置详细entry和output

entry入口配置是指页面中的入口文件，默认入口文件./src/index.js

output出口配置是指生成的文件输出到哪个地方去，./dist/main.js

path，输出路径，filename，输出文件名

module，webpack只能打包js文件，无法识别其他语法的文件，如果要让webpack打包其他文件，首先需要让webpack识别不同的文件。

loader分类

分类	说明
转换编译	script-loader，babel-loader，ts-loader，coffee-loader
处理样式	style-loader，css-loader，less-loader，sass-loader，postcss-loader
处理文件	raw--loader，url-loader，file-loader
处理数据	csv-loader，xml-loader
处理模板语言	html-loader，pug-loader，jade-loader，markdown-loader
清理和测试	mocha-loader，eslint-loader

 

常用loader

loader	说明
css-loader	解析css语句
style-loader	将css-loader解析后的文本，添加<style>标签
babel-loader	将ES6+、JSX语法转成ES5低版本语法
url-loader	url-loader对未设置或者小于limit byte设置的图片以base64的格式进行转换<br />对于大于limit byte的图片用file-loader进行解析
file-loader	解析项目中的url引入（包括img的src和background的url）<br />修改打包后文件引用路径，使之指向正确的文件
less-loader	less编译器
vue-loader	Vue也推出了自己的vue-loader，可以方便的打包 .vue文件 的代码。<br />在vue-cli（快速构建单页应用的脚手架）中得到应用。

 

 

 

 

 

 

 

babel loader

babel是一个js编译器，它是通过语法转换器支持最新版本的JavaScript，这插件允许你使用新语法，无需等待浏览器支持。

使用babel首先要配置.babelrc文件，该文件用来设置转码规则和插件，存放在项目的根目录下。

在linux系统中，rc结尾的文件通常代表运行时自动加载的文件、配置等等。

在.babelrc配置文件中，主要是对预设和插件进行配置。

配置项	说明
presets	预设 对js最新的语法糖进行编译，并不负责转译新增的api和全局对象。例如：let/const可以被编译，而String.includes、Object.assign等对象新增方法并不能被编译。<br />常用转译器：babel-preset-env、babel-preset-es2015（2016、2017）、babel-preset-latest等
plugins	插件 控制如何转换代码，babel默认只转换新的js语法，而不转换新的API，比如 Set,，Maps，Symbol，Promise 等全局对象，transform-runtime 用来解决以上问题

 

webpack在启动后会从配置的入口模块触发，找出所有依赖的模块，默认会采用模块化标准里约定号的规则去寻找。

属性	说明
alias	（译：别名）通过别名将原来导入路径映射成一个新的导入路径
extensions	（译：扩展）数组 导入模块时，可以省略的文件后缀名

 

 

 

其他配置

配置项	说明
devtool	是否生成以及如何生成sourcemap
devserver	开启一个本地开发服务器
watch	监听文件变化并自动打包
watchoption	用来定制watch模式的选项
performance	打包后命令行如何展示性能提示，如果超过某个大小是警告还是报错

 

 

 

 

 

webpack-dev-server

它是一个小型的web服务器，可以自动监视项目文件的变化，自动刷新浏览器，其HMR方式只替换更新的部分，而不是重载页面，大大提高了刷新效率

配置项	说明	默认值
inline	自动刷新<br />当我们对业务代码做了一些修改，保存（ctrl+s）后，页面会自动刷新，所做的修改会直接同步到页面上，不需要手动刷新页面或重启服务	true
hot	热模块替换<br /> 不用配置（通常是通过命令行 --hot 选项启动，会自动加载webpack.HotModuleReplacementPlugin插件）	true
host	主机地址
open	自动打开浏览器，可以指定浏览器，例如：--open 'Chrome'	false
port	端口	默认8080
overlay	编译出错的时候，在浏览器页面上显示错误	false
stats	用来控制编译的时候shell上的输出内容<br />stats: "errors-only" 只打印错误<br /> 还有"minimal"，"normal"，"verbose"
false	true：对所有服务器资源采用gzip压缩	false
contentBase	指定了服务器资源的根目录，<br />如果不写入contentBase的值，那么contentBase默认是项目的目录	"./"
historyApiFallback	它使用的是HTML5 History Api，任意的跳转或404响应可以指向 index.html 页面	true

 

 

 

 

 

 

 

 

例子：

运行

npm start

运行后，webpack-dev-server将开始运行，打开浏览器，直接输入127.0.0.1:8080/index.html，打包后的页面已经可以使用了

注意：

index.html内无需引入main.js文件，打包后的index.html文件中会自动引入该文件。

webpack-dev-server运行后，浏览器中输出的页面，都是运行在内存中的，只有build以后，才会在dist目录中得到最终的结果文件。