webpack 默认用法
- yarn init -y
- yarn add webpack webpack-cli --dev
- 执行yarn webpack 会自动找到node_modules
- bin目录的webpack命令
- 自动打包src下面的index.js
webpack 简单配置
webpack.config.js 可以导出对象，数组， 函数。
// nodejs path方法。拼接路径
const path = require('path');
// 导出一个对象
module.exports = {
entry: './src/index.js', // 打包js入口
output: { // 打包js出口
filename: 'bundle.js', // 打包js名字
path: path.join(__dirname, 'output') // 路径
}
}
mode警告
- production: 启动优化打包结果。
- development: 优化打包的速度。
- none: 不启动打包之外的任何操作。
module.exports = {
mode: 'production' // 默认production 还可以是 development ｜｜ none
};
loader
- webpack内置是对js模块的打包。loader是对webpack功能的扩展。对不同模块进行处理。同时也可以再对js做更深一步的处理。 loader: 写在module对象下面的rules数组里面。每个元素是一个对象。里面有两个属性。每个对象对应着对某个模块的处理 我们根据test: 正则匹配模块。use:Array | Array | string: 表示使用哪个插件。
module.exports = {
module: { // object
rules: [ // Array<obj>
.....
{ loader: 'style-loader' },
{
loader: 'css-loader', // 需要使用的插件。
options: { // 插件需要的配置。
modules: true
}
}
]
}
};
将所有css import 页面需要的js里面
文件资源文件加载器 -- file-loader
js模块在处理的是碰到来图片文件。这个时候就会找到我们事先写好的file-loader文件。现将这个文件拷贝到输出的目录。然后拷贝的路径当作返回值返回。
webpack URL 加载器 -- url-loader
- 对一些小图标使用这种url-loader 最终生成base64
{
test: /.jpeg$/,
use: [{
loader: 'url-loader',
options: {
limit: 10 * 1024 // 最大10kb进行base64转换。大于10的不进行转换。会进行拷贝类似于file-loader的操作。
} // 但是还是的安装file-loader. 最终大于10的它会自动调用这个loader.
}]
}
webpack 加载器分类
- 编译转换类。如css-loader
- 文件操作类型的加载器。// 最终拷贝到最终输出的文件
- 代码质量检查的加载器。 // 如eslint-loader
webpack 处理 es2015
需要安装babel-loader
{
test: /.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"]
}
}
}
资源加载方法
css-loader可以解决css文件引入的资源文件 html-loader 可以默认解决html文件引入的img-src属性的做处理。
{
test: /.html$/,
use: {
loader: 'html-loader',
options: {
attributes: {
list: [
{
tag: 'img',
attribute: 'src',
type: 'src',
},
{
tag: 'a',
attribute: 'href',
type: 'src',
}
],
}
}
}
}
开发自己的loader
- 根目录新建markdown-loader.js
module: {
rules: [
{
test: /.md$/,
use: [
'html-loader',
'./markdown-loader' // 使用的loader可以是路径。
]
},
]
}
- 在markdown-loader.js 使用module.exports 导出一个箭头函数。箭头函数有个参数。则是根据test: /.md$/正则得出来的数据。这个模块返回的时候必须是js字符串。否则会报错。
- yarn add marked --dev
const marked = require('marked');
module.exports = source => {
const html = marked(source);
// return 'console.log(123)'
// return html
// return `model.exports = ${JSON.stringify(html)}`
// return `export default ${JSON.stringify(html)}`
return html;
}
webpack插件机制 Plugin
- 清除dist目录
- 拷贝静态文件到输出目录
- 压缩输出代码
// plugin使用： yarn add clean-webpack-plugin --dev
const CleanWebpackPlugin = require('clean-webpack-plugin')
plugins: [
new CleanWebpackPlugin()
]
- yarn add html-webpack-plugin
开发webpack插件
class ConsoleLogOnBuildWebpackPlugin {
apply(compiler) {
compiler.hooks.emit.tap('ConsoleLogOnBuildWebpackPlugin', compilation => {
for (const name in compilation.assets) {
if (name.endsWith('.js')) {
const content = compilation.assets[name].source();
const withoutComments = content.replace(/\/\*\*+\*\//g, '');
compilation.assets[name] = {
source: () => withoutComments,
size: () => withoutComments.length
}
}
}
})
}
}
plugins: [
new ConsoleLogOnBuildWebpackPlugin()
]
- yarn webpack --watch *yarn webpack-dev-server --dev
devServer: {
contentBase: './public' // 指定额外的资源目录。
},
// http://localhost:8080/index.txt
webpack-dev-server 代理
devServer: {
contentBase: './public',
proxy: {
// 接口以"/api"为标记。代理到 https://api.github.com
'/api': {
target: 'https://api.github.com',
// 代理完接口：https://api.github.com/api
// "/api"如果在原接口么有的话可以使用下面这个对象删除它
pathRewrite: {
'^/api': ''
},
// 原程请求主机名以https://api.github.com为准
changeOrigin: true
}
}
},
source Map 介绍
- 解决代码调试的问题
- 根据source Map反推得到源代码。方便本地调试。 映射关系：
- version: “source Map版本”
- sources: 源代码文件： Array
- names: 变量名称： Array
- mapping: base64编码。映射关系
- 更容易调试
- 在使用source Map 代码末尾添加一行注释。
- //# sourceMappingURL=jquer-3.4.1.min.map 有这行注释会自动请求这个文件。显示真正意义上的源代码。
webpack 配置source Map
- devtool： 'eval | source-map',
- eval: 构建速度快。只能定位文件不能定位行。
- source-map： 构建速度慢可以定位到行。
- webpack.config.js
devtool: 'eval | source-map'
// 选择带有module的devtool
const allModes = [
'eval',
'cheap-eval-source-map',
'cheap-module-eval-source-map', // 推荐
'eval-source-map',
'cheap-source-map',
'cheap-module-source-map',
'inline-cheap-source-map',
'inline-cheap-module-source-map',
'source-map',
'inline-source-map',
'hidden-source-map',
'nosource-source-map'
];
webpack 热替换
devServer: {
// hot: true, // 热替换不成功会执行浏览器自动刷新
hotOnly: true, // 只进行热替换不会自动刷新， 可以显示报错位置。
contentBase: './public',
proxy: {
// 接口以"/api"为标记。代理到 https://api.github.com
'/api': {
target: 'https://api.github.com',
// 代理完接口：https://api.github.com/api
// "/api"如果在原接口么有的话可以使用下面这个对象删除它
pathRewrite: {
'^/api': ''
},
// 原程请求主机名以https://api.github.com为准
changeOrigin: true
}
}
},
不同环境的webpack 配置。
- 配置文件根据环境不同导出不同配置
- 一个环境对应一个配置文件
配置文件根据环境不同导出不同配置
一个环境对应一个配置文件
yarn add webpack-merge --deev
