webpack配置
一、webpack配置
初始化npm和安装webpack
npm init -y //-y表示默认配置
npm install -g webpack webpack-cli //-g 表示全局安装 如果要使用命令行就要全局安装 -D表示安装在本地
创建webpack.config.js
相关配置参数：
- Entry: 入口
- Module:模块，webpack中一切皆是模块
- Chunk:代码库，一个chunk由十多个模块组合而成，用于代码合并与分割
- Loader:模块转换器，用于把模块原内容按照需求转换成新内容
- Plugin:扩展插件
- Output: 输出结果
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src/index.js'), //__dirname 是本地目录的绝对路径 path.resolve返回的结果把两个路径参数进行了拼接
output: {
path: path.resolve(__dirname, 'dist'), //输出的文件路径
filename: 'bundle.js', //输出的主文件的文件名
publicPath: '/' //上线时配置的是cdn的地址
}
}
二、HTML模板
html-webpack-plugin 可以指定template模板文件，将会在output目录下，生成html文件，并引入打包后的js
安装
npm install -D html-webpack-plugin
在webpack.config.js中引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src/index.js'), //__dirname 是本地目录的绝对路径 path.resolve返回的结果把两个路径参数进行了拼接
output: {
path: path.resolve(__dirname, 'dist'), //输出的文件路径
filename: 'bundle.js', //输出的主文件的文件名
publicPath: '/' //上线时配置的是cdn的地址
}
plugins: [ new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src/index.html') //以当前的html文件为模板作为展示
}) ]
}
三、配置 webpack-dev-server
webpack-dev-server提供了一个简单的Web服务器和实时热更新的能力
安装
npm install -D webpack-dev-server
在 webpack.config.js 增加 devServer 配置:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//...other code
devServer: {
contentBase: './dist',
port: '8080',
host: 'localhost'
}
}
在 package.json 的 scripts 字段中增加:
"scripts": { "dev": "webpack-dev-server --mode development" }
在命令行中执行 npm run dev 然后打开浏览器 进入 localhost://8080查看网页
四、加载css
通过使用 style-loader 和 css-loader, 可以将 css 文件转换成JS文件类型。
npm install -D style-loader css-loader
在webpack.config.js中加入module
module.exports = { //other code module: { rules: [ { test: /\.css/, use: ['style-loader', 'css-loader'], //注意顺序，从右向左开始转化 use里的loader也可以以对象的形式进行配置
exclude: /node_modules/, //不要处理的路径 include: path.resolve(__dirname, 'src') //要处理的路径 } ] } }
需要在主js文件 index.js中引入 例如： import './src/index.css'
配置参数：
- test: 匹配处理文件的扩展名的正则表达式
- use: loader名称
- include/exclude: 手动指定必须处理的文件夹或屏蔽不需要处理的文件夹
- query: 为loader提供额外的设置选项
五、加载图片
- file-loader: 解决CSS等文件中的引入图片路径问题
- url-loader: 当图片小于limit的时候会把图片Base64编码，大于limit参数的时候使用file-loader进行拷贝
安装
npm install -D url-loader file-loader
在 webpack.config.js 中增加 loader 的配置(增加在 module.rules 的数组中)。
module.exports = { //other code module: { rules: [ { test: /\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/, use: [ { loader: 'url-loader', options: { limit: 8192, outputPath: 'images' } } ] } ] } }
六、编译less和sass
安装
npm install -D less less-loader
npm install -D node-sass sass-loader
在webpack.config.js添加配置
module.exports = { //other code module: { rules: [ { test: /\.less/, use: ['style-loader', 'css-loader', 'less-loader'], exclude: /node_modules/, include: path.resolve(__dirname, 'src') }, { test: /\.scss/, use: ['style-loader', 'css-loader', 'sass-loader'], exclude: /node_modules/, include: path.resolve(__dirname, 'src') } ] } }
七、转义 ES6/ES7/JSX
npm install -D @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread
添加配置
module.exports = { //other code module: { rules: [ { test: /\.jsx?$/, use: [ { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/react'], plugins: [ ["@babel/plugin-proposal-decorators", { "legacy": true }] //装饰器 ] } } ], include: path.resolve(__dirname, 'src'), exclude: /node_modules/ }, ] } }
八、压缩JS文件
安装
npm install -D uglifyjs-webpack-plugin
添加配置
const UglifyWebpackPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
//other code
optimization: {
minimizer: [
new UglifyWebpackPlugin({
parallel: 4
})
]
}
}
九、分离css
安装
npm install -D mini-css-extract-plugin
配置 把style-loader 换成 插件loader
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
//other code
module: {
rules: [
{
test: /\.css/,
use: [{ loader: MiniCssExtractPlugin.loader}, 'css-loader'],
exclude: /node_modules/,
include: path.resolve(__dirname, 'src')
},
{
test: /\.less/,
use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'less-loader'],
exclude: /node_modules/,
include: path.resolve(__dirname, 'src')
},
{
test: /\.scss/,
use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'sass-loader'],
exclude: /node_modules/,
include: path.resolve(__dirname, 'src')
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
]
}
十、压缩CSS文件
安装
npm install -D optimize-css-assets-webpack-plugin
添加配置
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
//other code
optimization: {
minimizer: [
new OptimizeCssAssetsWebpackPlugin()
]
}
}
webpack.config.js文件:
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const UglifyWebpackPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, 'src/index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
devServer: {
contentBase: './dist',
port: '8080',
host: 'localhost'
},
module: {
rules: [
{
test: /\.jsx?$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/react'],
plugins: [
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
}
}
],
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/
},
{
test: /\.css/,
use: [{ loader: MiniCssExtractPlugin.loader}, 'css-loader'],
exclude: /node_modules/,
include: path.resolve(__dirname, 'src')
},
{
test: /\.less/,
use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'less-loader'],
exclude: /node_modules/,
include: path.resolve(__dirname, 'src')
},
{
test: /\.scss/,
use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'sass-loader'],
exclude: /node_modules/,
include: path.resolve(__dirname, 'src')
},
{
test: /\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
outputPath: 'images'
}
}
]
}
]
},
optimization: {
minimizer: [
new UglifyWebpackPlugin({
parallel: 4
}),
new OptimizeCssAssetsWebpackPlugin()
]
},
plugins: [
new htmlWebpackPlugin({
template: path.resolve(__dirname, 'src/index.html'),
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
}),
new CleanWebpackPlugin()
]
}
浙公网安备 33010602011771号