devServer
开发服务器配置 用来自动编译,自动打开浏览器,自动刷新浏览器等,
module.exports = {
// webpack配置
// 入口文件
entry: './src/index.js' ,
// 出口文件
output: {
// 输出文件的名字
filename: 'built.js',
// 输出路径
path: resolve(__dirname, "build")
},
// loader配置
module:{
...
},
// plugins配置
plugins: [
...
],
// 模式 production(生产模式) | development(开发模式)
mode: 'development' ,
// 开发服务器配置 用来自动编译,自动打开浏览器,自动刷新浏览器等
// 启动devServer 需要使用 webpack-dev-server
devServer: {
// 打包后的目录
contentBase: resolve(__dirname, 'build'),
// 启动gzip压缩
compress: true ,
// 启动的端口
port: 3000,
// 自动打开浏览器
open: true,
}
}
安装依赖
npm install webpack-dev-server --save-dev
# 由于兼容性问题 webpack-cli版本需要降低
npm install --save-dev webpack-cli@3.3.12
启动
npx webpack-devserver
CSS 兼容性处理
npm i postcss-loader postcss-preset-env -D
//
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 提取CSS成一个单独的文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 设置node.js环境变量(激活开发环境)
process.env.NODE_ENV = 'development'
module.exports = {
// webpack配置
// 入口文件
entry: './src/index.js' ,
// 出口文件
output: {
// 输出文件的名字
filename: 'js/built.js',
// 输出路径
path: resolve(__dirname, "build")
},
// loader配置
module:{
rules: [
// 详细的loader配置
{
// 匹配那些文件
test: /\.css$/ , // 以CSS结尾的文件
// 使用那些Loader
use: [
// 'style-loader',
// 取代style-loader, 作用 提取JS中的CSS成为独立文件
MiniCssExtractPlugin.loader,
'css-loader',
/*
* CSS 兼容性处理: postcss -> postcss-loader postcss-preset-env
帮助 postcss package.json中的browserslist里面的配置,通过配置加载指定的CSS兼容性样式
"browserslist":{
"development": [
"last 1 chrome version" ,
"last 1 firefox version" ,
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
*/
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [["postcss-preset-env",{}]]
}
}
}
]
},
]
},
// plugins配置
plugins: [
// 默认创建空的HTML,自动引入打包输出的所有资源(JS/CSS)
new HtmlWebpackPlugin({
// 复制 './src/index.html', 并自动引入到打包后的html文件内
template: './src/index.html'
}),
new MiniCssExtractPlugin({
// 提取到css 路径下
filename: 'css/built.css'
})
],
// 模式 production(生产模式) | development(开发模式)
mode: 'development' ,
}
压缩CSS
npm i optimize-css-assets-webpack-plugin -D
//
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 提取CSS成一个单独的文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩CSS optimize-css-addets-webpack-plugin
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置node.js环境变量(激活开发环境)
process.env.NODE_ENV = 'development'
module.exports = {
// webpack配置
// 入口文件
entry: './src/index.js' ,
// 出口文件
output: {
// 输出文件的名字
filename: 'js/built.js',
// 输出路径
path: resolve(__dirname, "build")
},
// loader配置
module:{
},
// plugins配置
plugins: [
...
// 压缩CSS
new OptimizeCssAssetsWebpackPlugin()
],
语法检查
npm i eslint-loader eslint -D
移除HTML内的空格和注释
plugins: [
// 默认创建空的HTML,自动引入打包输出的所有资源(JS/CSS)
new HtmlWebpackPlugin({
// 复制 './src/index.html', 并自动引入到打包后的html文件内
template: './src/index.html',
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
],
JS兼容性处理
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader', //babel-loader @babel/preset-env @babel/core corejs
enforce: 'pre',// 当多个loader都要处理JS文件时,按照顺寻执行, 但是设置这个属性后,就可以优先执行
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {
version: 3
},
targets: {
chrome: '60',
firefox: '50'
}
}
]
]
}
},
对所有JS进行兼容性处理
npm i @babel/polyfill -D
// 只需要这入口文件内引入即可
import '@babel/polyfill'