webpack学习笔记（踩坑）
一、什么是webpack
是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
二、安装和命令行
Webpack可以使用npm安装，新建一个空的练习文件夹，在终端中转到该文件夹后执行下述指令就可以完成安装。
我这里用的vscode，可以直接进入该目录下，若是在终端可以使用cd进入目录
前期准备工作：
- 在里面创建两个文件夹,src文件夹和public文件夹，src文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个
index.html文件）。接下来我们再创建三个文件:
index.html--放在public文件夹中;Greeter.js-- 放在src文件夹中;main.js-- 放在src文件夹中;
1.初始化
npm init
2.安装webpack
先全局安装webpack和webpack-cli
npm install webpack -g
npm install webpack-cli -g
再局部安装webpack和webpack-cli
npm install webpack --save-dev
npm install webpack-cli --save-dev
我在后面继续安装的时候报错，后来发现这里需要这样安装
3.处理js文件（坑多）
在项目根目录下，新建main.js，然后打包
webpack main.js bundle.js
其中main.js是scr目录下的 bundle.js是自动生成的
这个原因就是上面的若不是按照那个顺序，就会出错，可能是我少了一步吧。。。。
修改之后继续。。执行webpack main.js bundle.js，报错。。。
示没有配置webpack的mode选项，默认有production和development两种，我们输入
依然有错：未找到入口模块发成错误，
这是因为webpack4.x是以项目根目录下的./src/index.js作为入口，所以我们要新建src目录且改main.js为index.js，成功
每次这样写有点麻烦，我们可以在package.json中
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development"
},
必须是双引号
当前目录结构：
二.css练习
新建一个css文件style.css，在index.js中引入
const greeter = require('./Greeter.js');
require('./style.css');
document.querySelector("#root").appendChild(greeter());webpack不支持css文件类型，需要依赖loader
npm install css-loader style-loader
css-loader：使webpack可以处理css文件
style-loader：新建一个style标签，把css-loader处理过的文件放进去，然后插入到HTML标签中
安装之后使用：
webpack --mode development --module-build 'css=style-loader!css-loader' //给css绑定
三.webpack的配置
1.新建一个文件webpack.config.js（默认名），是在使用webpack时默认的配单文件
(1).单文件输入：
const path = require('path');
module.exports = {
entry: './src/js/Greeter.js', // 入口文件
output: { // 出口文件
path: path.resolve(__dirname, 'dist/js'), // 出口文件位置，一定要是绝对路径
filename: 'bundle.js' // 出口文件名
}
}
上面：将会打包Greeter.js文件到bundle.js文件
(2)多文件输入：
const path = require('path');
module.exports = {
entry: {
main: './src/main.js', // 入口文件
a: './src/a.js'
},
output: { // 出口文件
path: path.resolve(__dirname, 'dist/js'), // 出口文件位置
filename: '[name].js' // 出口文件名，name就是entry的键名
}
}
2.自动生成HTML页面文件
(1) 安装插件
npm install html-webpack-plugin --save-dev
(2) 引用插件
const path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './src/Greeter.js', // 入口文件
},
output: { // 出口文件
path: path.resolve(__dirname, 'dist'), // 出口文件位置
filename: 'js/bundle.js' // 出口文件名
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html', // 生成的HTML名，路径为上面output中的path
template: './index.html', // 会与根目录下的index.html相关联，把根目录下index的东西都放到生成的HTML中
inject: 'head' // 打包后的script放到head中
})
]
}
（3）传参使用
1.参数
plugins: [
new htmlWebpackPlugin({
filename: 'index.html', // 生成的HTML名，路径为上面output中的path
template: './index.html', // 会与根目录下的index.html相关联，把根目录下index的东西都放到生成的HTML中
inject: 'head' , // 打包后的script放到head中
title:'you are welcome'
})
]在根目录下的index.html中
<%= htmlWebpackPlugin.options.title %>
生成的dist/index.html中
you are welcome
2、上线地址
output: { // 出口文件
path: path.resolve(__dirname, 'dist'), // 出口文件位置
filename: 'bundle.js' , // 出口文件名
publicPath:'http://llh.com' //上线的地址
},生成的index.html中
Webpack
you are welcome
3、html压缩
inject: 'head' , // 打包后的script放到head中
title:'you are welcome',
minify:{
removeComments: true, // 去掉注释
collapseWhitespace: true // 去掉空格4、多页面应用，生成多个html文件
plugins: [
new htmlWebpackPlugin({
filename: 'index.html', // 生成的HTML名，路径为上面output中的path
template: './index.html', // 会与根目录下的index.html相关联，把根目录下index的东西都放到生成的HTML中
inject: 'head' , // 打包后的script放到head中
title:'you are welcome',
chunks: ['Greeter']
}),
new htmlWebpackPlugin({
filename: 'main.html', // 生成的HTML名，路径为上面output中的path
template: './index.html', // 会与根目录下的index.html相关联，把根目录下index的东西都放到生成的HTML中
inject: 'head' , // 打包后的script放到head中
title:'hello world',
chunks: ['Greeter'] // 会引入greeter.js
})
]五、loader的配置
1、解析es6语法
（1）安装babel
Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：
- 让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器完全支持；
- 让你能使用基于JavaScript进行了拓展的语言，比如React的JSX；
npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
在webpack中配置Babel的方法如下:
module: {
rules: [
{
test: /\.js$/, // 匹配js文件
loader: 'babel-loader',
exclude: path.resolve(__dirname, 'node_modules'), // 匹配时忽略这个目录，提高打包速度
include: path.resolve(__dirname, 'src'), // 匹配时查找的范围
query: {
presets: ['env']
}
}
]
}此处有坑。。。。。
在配置webpack.config.js自动打包的时候,出现Error: Cannot find module '@babel/core'错误
最初以为是babel-core没有安装上。重装了好几遍babel-core还是不行。对照以前的项目,发现babel-loader的版本不一样,之前的是@7.1.5版本,而现在是@8.0.0版本。
解决方法：
npm uninstall babel-loader
npm install [email protected]
再npm run dev 成功了。。。。。
2、解析css
（1）安装style-loader和css-loader
css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
npm install --save-dev style-loader css-loader
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}（3）在项目中经常有类似-webkit的前缀，每次写很麻烦，这里就要用到postcss-loader,后处理loader
npm install postcss-loader autoprefixer --save-dev // autoprefixer是自动补全
配置webpack
{
test: /\.css$/,
use: [
'style-loader', // 注意顺序
{ loader: 'css-loader', options: { importLoaders: 1 } }, // 在css中使用@import引入其他文件时，
'postcss-loader' // 不加importLoaders，postcss-loader不会操作引入的文件
]
}
新建一个postcss.config.js文件和webpack.config.js同级
module.exports = {
plugins: [
require('autoprefixer')
]
}
此时，如果你打包，并不会报错，但是前缀可能也没有，所以需要在package.json中加入
"browserslist": [
"> 1%", // 全球浏览器使用率大于1%，最新两个版本并且是IE8以上的浏览器，加前缀
"last 2 versions",
"not ie <= 8"
]
3、解析CSS预处理器
Sass 和 Less 之类的预处理器是对原生CSS的拓展，它们允许你使用类似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS，CSS预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句，
你现在可能都已经熟悉了，在webpack里使用相关loaders进行配置就可以使用了，以下是常用的CSS 处理loaders:
Less Loader
Sass Loader
Stylus Loader
（1）解析less
npm install less less-loader --save-dev
webpack的配置
{
test: /\.less$/,
loader: 'style-loader!css-loader!postcss-loader!less-loader' // 不用加importLoader，less-loader默认会有
}
（2）解析sass
npm install html-loader --save-dev
webpack的配置
{
test: /\.html$/,
loader: 'html-loader'
}
4.使用url-loader处理图片（会影响文件大小）
npm install url-loader --save-dev
webpack配置
{
test: /\.(png|jpg|gif|svg)$/i,
loader: 'url-loader',
query: {
limit: 30000, // 当图片小于30kb的时候，图片变为base64位，不打包
name: 'assets/[name]-[hash:5].[ext]'
}
}
5、通过image-webpack-loader和url-loader结合：先有image-webpack-loader打包，在通过url-loader
npm install image-webpack-loader --save-dev
{
test: /\.(png|jpg|gif|svg)$/i,
loaders: [
'url-loader?limit=1000&name=assets/[name]-[hash:5].[ext]',
'image-webpack-loader'
]
}
最后 贴上webpack全部代码：
const path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './src/Greeter.js', // 入口文件
},
output: { // 出口文件
path: path.resolve(__dirname, 'dist'), // 出口文件位置
filename: 'bundle.js' , // 出口文件名
publicPath:'http://llh.com' //上线的地址
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html', // 生成的HTML名，路径为上面output中的path
template: './index.html', // 会与根目录下的index.html相关联，把根目录下index的东西都放到生成的HTML中
inject: 'head' , // 打包后的script放到head中
title:'you are welcome',
chunks: ['Greeter'],
minify:{
removeComments: true, // 去掉注释
collapseWhitespace: true // 去掉空格
}
}),
new htmlWebpackPlugin({
filename: 'main.html',
template: './index.html',
title: 'hello world',
chunks: ['Greeter'] // 会引入main.js和a.js
})
],
module: {
rules: [
{
test: /\.js$/, // 匹配js文件
loader: 'babel-loader',
exclude: path.resolve(__dirname, 'node_modules'), // 匹配时忽略这个目录，提高打包速度
include: path.resolve(__dirname, 'src'), // 匹配时查找的范围
query: {
presets: ['env']
}
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
},
{
test: /\.css$/,
use: [
'style-loader', // 注意顺序
{ loader: 'css-loader', options: { importLoaders: 1 } }, // 在css中使用@import引入其他文件时，
'postcss-loader' // 不加importLoaders，postcss-loader不会操作引入的文件
]
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!postcss-loader!less-loader' // 不用加importLoader，less-loader默认会有
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpg|gif|svg)$/i,
loader: 'url-loader',
query: {
limit: 30000, // 当图片小于30kb的时候，图片变为base64位，不打包
name: 'assets/[name]-[hash:5].[ext]'
}
},
{
test: /\.(png|jpg|gif|svg)$/i,
loaders: [
'url-loader?limit=1000&name=assets/[name]-[hash:5].[ext]',
'image-webpack-loader'
]
}
]
}
}
参考：
webpack4.x深入与实践
入门 Webpack，看这篇就够了