webpack4学习笔记(一)
什么是webpack
webpack核心是一个模块打包工具,webpack安装时不建议全局安装：全局安装的webpack版本可能和某一个项目的webpack版本不匹配，导致项目运行失败。
webpack-cli的作用是为了可以在命令行里使用webpack命令 webpack基本配置：
const path = require('path');
module.exports = {
mode: 'production', // production代码会被压缩为一行，development不会被压缩
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist') // _dirname是值webpackconfig文件所在目录的路径， 生成一个名叫bundle文件的绝对路径
}
}
2
3
4
5
6
7
8
9
entry与output
entry作为入口，即可以设置为字符串也可以设置为对象,下面两种写法实现的是一样的效果，在output没有设置输出文件名时，默认的输出文件js文件名为main.
entry: './src/index.js',
entry: {
main: './src/index.js',
}, // 入口文件
2
3
output文件作为输出，可以设置输出的文件名以及文件路径
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist') // _dirname是值webpackconfig文件所在目录的路径， 生成一个名叫bundle文件的绝对路径
},
2
3
4
如果我们遇到需要打包多个入口文件的需求，我们可以这样设置entry和output,最终会在dist文件夹下生成main.js和sub.js两个文件。
entry: {
main: './src/index.js',
sub: './src/index.js'
}, // 入口文件
output: {
publicPath: 'http://cdn.com.cn',
filename: '[name].js', // entry对应的key值
path: path.resolve(__dirname, 'dist') // _dirname是值webpackconfig文件所在目录的路径， 生成一个名叫bundle文件的绝对路径
},
2
3
4
5
6
7
8
9
loader是什么
loader是一个打包方案，当webpack遇到一些文件不知如何打包时，可以求助loader，loader知道如何打包这些文件。
file-loader
webpack图片打包可以使用file-loader,通过在module里面设置rule来实现。
module: {
rules: [{
test: /\.png/,
use: {
loader: 'file-loader'
}
}]
},
2
3
4
5
6
7
8
filr-loader帮助我们做了两件事情：
1.当遇到图片文件时会将其打包移动到dist目录下
2.接下来会获得图片模块的地址，并将地址返回到引入模块到变量之中。
如果需要打包后文件有所要求，例如输出名称，存放地址等，我们可以在options里面进行设置
module: {
rules: [{
test: /\.(png|jpg|gif|svg|jpeg)$/,
use: {
loader: 'file-loader',
options: {
// placeholder 占位符
name: '[name]_[hash].[ext]',
// 图片存储文件
outputPath: 'images/'
}
}
}]
},
2
3
4
5
6
7
8
9
10
11
12
13
14
url-loader
url-loader基本上可以实现上述file-loader的功能，但是有一区别就是经过url-laoder打包后的dist文件下是不存在image文件的，这是因为url-loader会把图片转换成base64的字符串直接放在bundle.js里面。
好处：
1.直接将图片打包到js里，不用额外到请求图片，省了http请求
坏处：
1.如果遇到打包到文件非常大，那么加载会加载很长时间，影响体验
url最佳使用方式：如果图片很小，只有1-2kb，可以直接打包到js文件里，如果图片很大，可以使用file-loader的打包方式，打包到images里面。
options: {
// placeholder 占位符
name: '[name]_[hash].[ext]',
outputPath: 'images/',
// 小于200kb则打包到js文件里，大于则打包到imgages里
limit: 204800
}
2
3
4
5
6
7
样式打包
webpack通常不知道怎么打包css文件，我们想要实现样式打包，通常需要借助style-loader, css-loader
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader']
}]
2
3
4
5
style-loader和css-loader的作用：
1.css-loader帮助我们分析几个css文件的关系，并合成一个文件
2.style-laoder获得文件后，会把文件挂载到header中
sass-loader
我们通常需要打包sass、less等样式文件，我们需要使用sass-laoder.
安装：
npm install sass-loader node-sass --save-dev
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}]
2
3
4
5
loader的执行顺序是从下至上，从右到左来执行。
postcss-loader
我们写样式代码时，为了实现不同浏览器兼容，通常会手动添加厂商前缀，但是这样非常的影响开发效率。现在postcss-loader提供自动添加厂商前缀的功能，但是需要配合autoprefixer插件来使用。
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
2
3
4
5
webbpack配置：
{
test: /\.scss$/,
use: ['style-loader', ‘css-laoder’, 'sass-loader', 'postcss-loader']
},
2
3
4
css-loader
我们经常会遇到在一个样式文件引用另一个文件，但是webpack打包时，被引入的文件不会走'sass-loader', 'postcss-loader',而去走css-laoder,如果需要被引入的文件安装正常的顺序来走loader,可以通过css-loader的importLoaders来实现。
rules: [
{
test: /\.scss$/,
use: ['style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
}
}, 'sass-loader', 'postcss-loader']
},
]
2
3
4
5
6
7
8
9
10
11
12
css-module
CSS-Module 是一个 css 模块化解决方案，可以通过webpack 在 css-loader 配置 css-module ，开启后默认局部作用域.即样式文件只作用于该模块，不会和其他样式文件耦合。用于解决以下问题：
- 全局污染
- 命名混乱
- 依赖管理不彻底
- 无法共享变量
- 代码压缩不彻底
我们可以设置modules: true来开启css-module.
rules: [
{
test: /\.scss$/,
use: ['style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
// modules: true
}
}, 'sass-loader', 'postcss-loader']
},
]
2
3
4
5
6
7
8
9
10
11
12
13
图标打包
通过新增rule来实现图片打包
rules: [
{
test: /\.(eot|ttf|svg)$/,
use: {
loader: 'file-loader'
}
},]
2
3
4
5
6
7