# 初始化package.json
$ npm init -y
# 本地安装webpack webpack-cli webpack-dev-server
$ npm i webpack webpack-cli webpack-dev-server -D
# 创建入口 出口 及模板 => webpack4.x中打包默认找src/index.js作为默认入口
$ mkdir src config dist
# 查看目录
$ ls
# 创建文件
$ touch src/index.js dist/index.html
# 先打个包
$ npx webpack
# 解决出现的黄色警告
mode是webpack中独有的,有两种打包环境,一个是开发环境:development,
另外一个是生产环境:production
打包的时候输入
$ npx webpack --mode=development 或者 npx webpack --mode=production
# 创建 webpack.dev.js 开发配置文件
$ touch config/webpack.dev.js
# 删除 dist/main.js src/index.js 文件
$ rm dist/main.js src/index.js
# 在src文件夹下面创建main.js文件
$ touch src/main.js
# 配置webpack.dev.js文件
const path = require("path");
module.exports = {
mode: "development",
entry: {
main: "./src/main.js"
},
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./../dist")
},
module: {},
plugins: [],
devServer: {}
};
# 如果自定义了webpack的配置,就不能再执行之前的webpack --mode="development"命令了,会报错的,因为 webpack4打包默认找的src下面的index.js入口,我们前面已经删除了,这里src下面死main.js文件,这就需要 手动让打包的时候执行你的配置文件
# 配置指令build打包命令 => 打开 package.json,在scripts下配置如下的指令,如果不懂,可以直接执行 npx webpack -h 会看到好多配置,第一个就是 --config 的配置
--config Path to the config file
[字符串] [默认值: webpack.config.js or webpackfile.js]
{
"name": "webpack-client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "npx webpack --config config/webpack.dev.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
# 接着执行 npm run build 进行打包
# 配置多入口, entry属性配置成一个对象,同时修改出口 output.filename的值:"[name].js",******** 注:[name]的意思是根据入口文件的名称,打包成相同的名称,有几个入口文件,就可以打包出几个文件。
const path = require("path");
module.exports = {
mode: "development",
entry: {
main: "./src/main.js",
main2: "./src/main2.js"
},
output: {
filename: "[name].js",
path: path.resolve(__dirname, "./../dist")
},
module: {},
plugins: [],
devServer: {}
};
# 添加devServer配置
devServer: {
contentBase: path.resolve(__dirname, "./../dist"),
host: "localhost",
compress: true,
port: 9856,
overlay: {
warnings: true,
errors: true
},
open: true
}
# 添加启动指令 npm start
"scripts": {
"build": "npx webpack --config config/webpack.dev.js",
"start": "npx webpack-dev-server --config config/webpack.dev.js"
},
# 自动打包html,并引入打包的js,删除dist目录,在src下 建立 index.html
$ npm install --save-dev html-webpack-plugin
# 插件配置参考 : https://www.npmjs.com/package/html-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin");
plugins: [
new HtmlWebpackPlugin({
title: "webpack 练习",
template: "./src/index.html",
filename: "./../dist/main.html",
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
},
hash: true
})
],
# 清理dist文件 => 每次打包后都会生成一个新增加的文件
$ npm install clean-webpack-plugin --save-dev
const CleanWebpackPlugin = require("clean-webpack-plugin");
# 在webpack.dev.js 中 找到plugins选项
new CleanWebpackPlugin(["dist"]),
# 处理样式css style sass 加载 并启用sourcemap进行 css调试 => loader 样式处理 https://www.webpackjs.com/loaders/
$ npm i css-loader style-loader node-sass sass-loader -D
# 配置webpack.dev.js 在 module属性下配置规则
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = {
mode: "development",
entry: path.resolve(__dirname, "./../src/main.js"),
output: {
filename: "[name].js",
path: path.resolve(__dirname, "./../dist")
},
devtool: "inline-source-map",
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(["dist"]),
new HtmlWebpackPlugin({
title: "webpack 练习",
template: "./src/index.html",
filename: "./../dist/main.html",
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
},
hash: true
})
],
devServer: {
contentBase: path.resolve(__dirname, "./../dist"),
host: "localhost",
compress: true,
port: 9856,
overlay: true,
open: true
}
};
# 自动添加css前缀,处理浏览器兼容
$ npm i postcss-loader autoprefixer -D
在最后一个loader前加入下边的代码
{
loader: "postcss-loader",
options: {
ident: "postcss",
sourceMap: true,
plugins: loader => [
require("autoprefixer")({ browsers: ["> 0.15% in CN"] })
]
}
},
# 将css文件进行单独专门打包抽取了样式,就不能再用 style-loader注入到 html 中了。
$ npm install --save-dev mini-css-extract-plugin
# css进行压缩 (一般用于生产环境)
$ npm i -D optimize-css-assets-webpack-plugin
# 添加配置
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
mode: "development",
entry: path.resolve(__dirname, "./../src/main.js"),
output: {
filename: "[name].js",
path: path.resolve(__dirname, "./../dist")
},
devtool: "inline-source-map",
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "postcss-loader",
options: {
ident: "postcss",
sourceMap: true,
plugins: loader => [
require("autoprefixer")({ browsers: ["> 0.15% in CN"] })
]
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(["dist"]),
new HtmlWebpackPlugin({
title: "webpack 练习",
template: "./src/index.html",
filename: "./../dist/main.html",
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
},
hash: true
}),
new MiniCssExtractPlugin({
filename: "[name].[hash:8].css",
chunkFilename: "[id].[hash].css"
})
],
devServer: {
contentBase: path.resolve(__dirname, "./../dist"),
host: "localhost",
compress: true,
port: 9856,
overlay: true,
open: true
},
optimization: {
minimizer: [new OptimizeCSSAssetsPlugin({})]
}
};
# 处理图片引入
$ npm install --save-dev file-loader
在 module下的rules数组中,新添加一个对象进行 配置
{
test: /\.(png|svg|gif|jpeg|jpg)$/,
use: ["file-loader"]
}
# 处理图片压缩(这个插件安装时会有很多问题,推荐爬梯子)
$ npm install image-webpack-loader --save-dev
# 将图片转化成base-64进一步优化图片
$ npm install --save-dev url-loader
使用了url-loader后,就可以卸载 file-loader 了
在module下的use中配置一个对象
{
test: /\.(png|svg|gif|jpeg|jpg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 10000
}
},
{
loader: "image-webpack-loader",
options: {
mozjpeg: { progressive: true, quality: 65 },
optipng: { enabled: false },
pngquant: {
quality: "65-90",
speed: 4
},
gifsicle: {
interlaced: false
},
webp: {
quality: 75
}
}
}
]
}
# 处理bable 转码 处理es6新语言
$ npm i -D babel-loader@7 babel-core babel-preset-env
# 优化bable编译速度
$ npm install babel-plugin-transform-runtime --save-dev
$ npm install babel-runtime --save
# 安装完成后在根目录下新建 .babelrc 文件
{
"presets": ["env"],
"plugins": [
[
"transform-runtime",
{
"helpers": true,
"polyfill": true,
"regenerator": true,
"moduleName": "babel-runtime"
}
]
]
}
# 配置文件
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader"
}
}
# 配置解析别名
resolve: {
alias: {
'@': path.resolve(__dirname, 'src/')
}
}
# js压缩(只在生产环境有效果,想看到效果请改变mode环境)
$ npm i -D uglifyjs-webpack-plugin