创建基本的webpack4.x项目
- 运行
npm init -y
快速初始化项目 - 在项目根目录创建
src
源代码目录和dist
产品目录 - 在 src 目录下创建
index.html
- 使用 cnpm 安装 webpack ,运行
cnpm i webpack webpack-cli -D
- 如何安装
cnpm
: 全局运行npm i cnpm -g
- 如何安装
- 注意:webpack 4.x 提供了 约定大于配置的概念;目的是为了尽量减少 配置文件的体积;
- 默认约定了:
- 打包的入口是
src
->index.js
- 打包的输出文件是
dist
->main.js
- 4.x 中 新增了
mode
选项(为必选项),可选的值为:development
和production
;
// 向外暴露一个打包的配置对象
module.exports = {
mode: "development"
}
//同样也可以进行入口文件和出口文件的配置
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
// path: path.resolve(process.cwd(), "dist"),
filename: "static/js/[name].js", // string [name].[chunkhash:8].js
}
}
- 配置
html-webpack-plugin
插件
导入在内存中自动生成index页面,并引入相应的js文件。
npm i --save-dev html-webpack-plugin
创建一个插件的实例对象
// 导入在内存中自动生成index页面的插件
const HtmlWebPackPlugin = require('html-webpack-plugin');
// 创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
// 源文件 根路径
template: path.join(__dirname, "./src/index.html"),
// 生成的内存中首页的名字
filename: "index.html"
});
//或者在plugins中进行相应的配置
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
template: 'public/index.html'
})
]
- 配置
webpack-dev-server
插件
实时打包编译,打包好的main.js放入了内存中,目录是不可见的。通过实时打包可以直接引入内存中的main.js文件,速度更快。
npm install webpack-dev-server --save-dev
在目录清单的scripts
中进行配置
"dev": "webpack-dev-server --open Chrome --port 3000 --hot --host 127.0.0.1"
通过npm run dev
进行启动
- 安装
css-loader
style-loader
对css
进行打包管理
npm install --save-dev style-loader css-loader
module: {
rules: [{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
}
}
在这种情况下压缩出来的样式是内联样式,不方便进行阅读。可以使用 mini-css-extract-plugin
把 css
单独提取出来。
npm install --save-dev mini-css-extract-plugin
在rules
中更改配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
rules: [{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'static/css/[name].css'
})
]
}
- 配置
css
预处理语言
$ npm install less-loader less--save-dev
在rules
中更改配置
module: {
rules: [ {
test: /\.less$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'],
}
]
}
- 安装
autoprefixer
postcss-loader
插件
自动增加前缀,提高兼容性
npm i -D postcss-loader
npm i -D autoprefixer
在rules
中的css
配置最后增加postcss-loader
module: {
rules: [{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
}
]
}
新建一个postcss.config.js
文件
module.exports = {
plugins: [
require('autoprefixer')
]
}
在package.json
配置文件中增加一个字段
"browserslist": [
//兼容99.5%的浏览器
"cover 99.5%",
"last 8 version"
//最后8个版本
]
- 安装
file-loader
插件
对图片资源进行处理
$ npm install file-loader --save-dev
在rules
中更改配置
module: {
rules: [{
test: /\.(png|jpe?g|gif)$/i,
use: [{
loader: 'file-loader',
options: {
name: 'static/img/[name].[ext]',
publicPath: '/'
}
}]
}
在这种情况下,无论图片多大都会进行处理会影响浏览器的渲染速度。
通过安装url-loader
插件实现对图片的选择性处理
$ npm install url-loader --save-dev
在rules
中更改配置
module: {
rules: [{
test: /\.(png|jpe?g|gif)$/i,
use: [{
loader: 'url-loader',
options: {
limit: 10000, //小于8kb的转换为base64编码并载入浏览器能够减少http请求数
name: 'static/img/[name].[ext]',
publicPath: '/'
}
}]
}
- 安装
copy-webpack-plugin
插件
在有些时候我们会对一些静态资源进行原封不动的拷贝,手动的话太麻烦这时需要借助copy-webpack-plugin
插件
$ npm install copy-webpack-plugin --save-dev
在plugins
中进行配置
const CopyPlugin = require('copy-webpack-plugin');
plugins: [
new CopyPlugin([{
from: path.resolve(process.cwd(), 'src/images/'),
to: path.resolve(process.cwd(), 'dist/images')
}])
]
- 安装
babel
插件
loader官方解释是文件预处理器,通俗点说就是webpack在处理静态文件的时候,需要使用 loader 来加载各种文件,比如: html文件需要使用html-loader ,css 需要使用css-loader 、 style-loader 等等。
npm install --save-dev babel-loader @babel/core @babel/preset-env
babel-loader
,用来处理ES6语法,将其编译为浏览器可以执行的js语法。
在 rules
中添加配置信息
module: {
rules: [
{
test: /\.js$/,
// (不处理node_modules 和 bower_components下的js文件) 优化处理加快速度
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
// presets设置的就是当前js的版本
presets: ['@babel/preset-env']
//plugins: [require('@babel/plugin-transform-object-rest-spread')] // plugin是需要的插件
}
}
}
],
}
可以使用 options
属性 来给loader
传递选项:
cacheDirectory
: 默认值是false
. 当设置了这个值时,指定的目录将会用来缓冲loader
的执行结果。之后的webpack
构建,将会尝试读取缓冲,来避免每次都执行时,产生高性能消耗的编译过程。如果提供的时空值或者传入true
,那么loader
使用默认的缓冲目录node_modules/.cache/babel-loader
。(如果没有找到node_modules
将会往上一级查找)
+babel-loader
很慢!- 解决办法:
- 要排除
node_modules
,参考文档中的loaders
配置的exclude
选项。 - 你也可以通过使用
cacheDirectory
选项,将babel-loader
提速至少两倍。 这会将转译的结果缓存到文件系统中。