什么是webpackcss
五个核心概念html
理解Loader前端
理解Pluginsnode
配置文件(默认)webpack
初始化项目：git
生成package.json文件es6
{
"name": "webpack_test",
"version": "1.0.0"
} 安装webpackgithub
建立js文件web
建立json文件chrome
建立主页面:
运行指令
开发配置指令：webpack src/js/app.js -o dist/js/app.js --mode=development
生产配置指令：webpack src/js/app.js -o dist/js/app.js --mode=production
结论：
缺点：
文件内容：
const {resolve} = require('path'); //node内置核心模块，用来设置路径。
module.exports = {
entry: './src/js/app.js', // 入口文件
output: { // 输出配置
filename: './js/bundle.js', // 输出文件名
path: resolve(__dirname, 'dist') //输出文件路径配置
},
mode: 'development' //开发环境(二选一)
mode: 'production' //生产环境(二选一)
}; 安装loader
配置loader
module: {
rules: [
{
test: /\.js$/, //只检测js文件
exclude: /node_modules/, //排除node_modules文件夹
enforce: "pre", //提早加载使用
use: { //使用eslint-loader解析
loader: "eslint-loader"
}
}
]
} 修改package.json（须要删除注释才能生效）
"eslintConfig": { //eslint配置
"parserOptions": {
"ecmaVersion": 8, // es8
"sourceType": "module", // ECMAScript 模块
}
} 安装loader
配置loader
module: {
rules: [
{
oneOf: [ //数组中的配置只有一个可以生效, 后面的配置都会放在当前数组中
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
]
} 建立less文件
入口app.js文件
安装loader
配置loader
oneOf: [
{
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}]
}
] 添加2张图片:
安装loader
配置loader
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
outputPath: 'images/', //在output基础上，修改输出图片文件的位置
publicPath: '../dist/images/', //修改背景图引入url的路径
limit: 8 * 1024, // 8kb大小如下的图片文件都用base64处理
name: '[hash:8].[ext]' // hash值为7位，ext自动补全文件扩展名
}
}
]
} 添加html文件
安装插件Plugins
在webpack.config.js中引入插件（插件都须要手动引入，而loader会自动加载）
配置插件Plugins
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
] 添加图片
安装loader
修改entry
配置loader
{
test: /\.(html)$/,
use: {
loader: 'html-loader'
}
} 添加字体文件
修改样式
@font-face {
font-family: 'iconfont';
src: url('../media/iconfont.eot');
src: url('../media/iconfont.eot?#iefix') format('embedded-opentype'),
url('../media/iconfont.woff2') format('woff2'),
url('../media/iconfont.woff') format('woff'),
url('../media/iconfont.ttf') format('truetype'),
url('../media/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} 配置loader
{
loader: 'file-loader',
exclude: [/\.js$/, /\.html$/, /\.json$/],
options: {
outputPath: 'media/',
publicPath: '../dist/media/',
name: '[hash:8].[ext]',
},
} 安装loader
引入webpack
修改webpack配置对象（注意不是loader中）
devtool: 'inline-source-map', // 将编译后的代码映射回原始源代码，更容易地追踪错误和警告
devServer: {
contentBase: './dist', //项目根路径
hot: true, //开启热模替换功能
open: true //自动打开浏览器
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
] 修改loader部分配置
publicPath: '../dist/images/' --> publicPath: 'images/' publicPath: '../dist/media/' --> publicPath: 'media/' 修改package.json中scripts指令
以上就是webpack开发环境的配置，能够在内存中自动打包全部类型文件并有自动编译运行、热更新等功能。
建立文件夹config，将webpack.config.js复制两份
修改webpack.prod.js配置，删除webpack-dev-server配置
module.exports = {
output: {
filename: 'js/[name].[hash:8].js', //添加了hash值, 实现静态资源的长期缓存
publicPath: '/' //全部输出资源公共路径
},
module: { //loader其余没有变化，只放了变化部分，只有须要修改路径部分改了
rules: [
{
oneOf: [
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8 * 1024, // 8kb大小如下的图片文件都用base64处理
name: 'images/[name].[hash:8].[ext]'
}
}
]
},
{
loader: 'file-loader',
exclude: [/\.js$/, /\.html$/, /\.json$/],
options: {
name: 'media/[name].[hash:8].[ext]',
},
}
]
}
]
},
mode: 'production', //修改成生产环境
} 修改package.json的指令
开发环境指令
生产环境指令
注意: 生产环境代码须要部署到服务器上才能运行
安装插件
引入插件
配置插件
new CleanWebpackPlugin()
安装插件
引入插件
配置loader
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
]
} 配置插件
new MiniCssExtractPlugin({
filename: "css/[name].[hash:8].css",
chunkFilename: "css/[id].[hash:8].css"
}) 运行指令
安装loader
配置loader
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'less-loader',
]
} 在项目根目录添加postcss配置文件：postcss.config.js
module.exports = {
"plugins": {
"autoprefixer": {
"browsers": [
"ie >= 8",
"ff >= 30",
"chrome >= 34",
"safari >= 8",
"opera >= 23"
]
}
}
} 运行指令：
安装插件
引入插件
配置插件
new OptimizeCssAssetsPlugin({
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
}) 运行指令：
安装loader
配置loader
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8 * 1024, // 8kb大小如下的图片文件都用base64处理
name: 'images/[name].[hash:8].[ext]'
}
},
{
loader: 'img-loader',
options: {
plugins: [
require('imagemin-gifsicle')({
interlaced: false
}),
require('imagemin-mozjpeg')({
progressive: true,
arithmetic: false
}),
require('imagemin-pngquant')({
floyd: 0.5,
speed: 2
}),
require('imagemin-svgo')({
plugins: [
{ removeTitle: true },
{ convertPathData: false }
]
})
]
}
}
]
} 运行指令：
修改插件配置
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}
}) 运行指令：
以上就是webpack生产环境的配置，能够生成打包后的文件。到这里基本配置已经告一段落了，全部配置我已经放在 仓库 中
第二期 Webpack4优化教程 已出~ 欢迎关注和提问~