webpack4温习总结
webpack是一个模块打包器，可以根据入口文件，随着依赖关系将所有文件打包成js文件。
首先需要node环境，百度一下自己安装
webpack官网地址：https://www.webpackjs.com
首先，建立一个文件，叫webpack1（不能叫webpack，否则初始化报错）
初始化：
npm init -y
初始化之后，文件夹中会出现一个package.json文件
之后安装webpack
npm i -D webpack
webpack4还需要安装一个webpack-cli
npm i -D webpack-cli
之后在根目录下创建一个src文件夹，里面放的是源码，里面放一个index.js，是入口文件；
在根目录建一个dist文件，用来盛放打包后的文件，dist文件夹中再放一个index.html文件；
再在跟目录下创建一个webpack.config.js文件，当做webpack的配置文件
在src/index.js中随便写点代码：
import _ from 'lodash';
import "./style/index.css";//loader=>css-loader module style-loader
import "./style/a.scss";
function createDomElement(){
let dom = document.createElement('div');
dom.innerHTML=_.join(["aicoder.com","好!","线下实习"],"");
// dom.className="box";
dom.classList.add("box");
return dom;
} let divDom = createDomElement(); document.body.appendChild(divDom);
在webpack.config.js中作出简单配置：
const path = require("path");
module.exports={
entry:"./src/index.js",//入口文件
mode:"development",//模式是开发环境
output:{//出口文件时main.js，打包到当前目录的dist文件夹下
filename:"main.js",
path:path.resolve(__dirname,"dist")
},
module: {
rules: [
{ //告诉webpack，当import,require遇到.css文件时,用css-loader、style-loader处理一下
test: /\.(sc|c|sa)ss$/,//scss,css,sass
use: ["style-loader","css-loader","sass-loader"],//loader的使用数据是从右向左的
}
]
}
}
在dist/index.html中引入打包生成的main.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
当然我们还在src/style/中加了index.css和a.sass文件，
如果想让webpack打包js之外的文件，需要安装对应的loader
css需要css-loader(用来解析css文件)、style-loader(用来将打包好的css文件用style标签引入)
scss文件需要 sass-loader 和 node-sass
一口气安装了：
npm i -D css-loader style-loader sass-loader node-sass
之后执行npx webpack
dist文件中就会出现打包好的main.js
然后就可以打开dist/index.html看一下效果。
如果我们想执行自己的自定义命令来让webpack打包，我们可以在package.json的script中配置一下命令，如：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"npx webpack -c webpack.config.js"
},
之后我们执行 npm run build就可以让webpack打包了
上面的-c webpack.config.js指的是 webpack是根据哪个文件的配置打包的
----------------------------------------------------------------------------------------------------------------------------
由于webpack是将所有的依赖文件打包成一个文件，当我们想调试css样式时，我们很难在控制台看到某一句代码是来自哪个源文件的，所以我们需要开启sourceMap，
在webpack.config.js中国这样配置：
module: {
rules: [
{
test: /\.(sc|c|sa)ss$/,//scss,css,sass
use: ["style-loader",{
loader:"css-loader",
options:{
sourceMap:true
}
},{
loader:"sass-loader",
options:{
sourceMap:true
}
}],
}
]
}
然后执行npm run build 在控制台查看css样式，就可以清晰的看到某个样式，是来自哪一个文件（index.css还是a.scss一目了然）
------------------------------------------------------------------------------------------------------------
另外我们一般还会用到postcss 以及 autuoprefixer
postcss 可以对css进行预处理 校验css 以及自动添加前缀 可以提前使用css的一些新特性
首先安装 (我们此处只用了 自动添加前缀的插件 所以额外安装了autoprefixer)
npm i -D postcss-loader
npm install --save-dev autoprefixer
在webpack.config.js中添加对应配置：
module: {
rules: [
{
test: /\.(sc|c|sa)ss$/,//scss,css,sass
use: ["style-loader",{
loader:"css-loader",
options:{
sourceMap:true
}
},{
loader:"postcss-loader",
options:{
ident:"postcss",//唯一标识，建议使用postcss
sourceMap:true,
plugins:(loader)=>[
require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
]
}
},{
loader:"sass-loader",
options:{
sourceMap:true
}
}],
}
]
}
----------------------------------------------------------------------------------------------------
将css文件单独抽离出来
npm install --save-dev mini-css-extract-plugin
一般我们都是在生产环境将css文件单独抽离出来的，所以我们在根目录中创建webpack.product.config.js文件，用来配置生产环境下的webpack配置，将上面的webpack.config.js中的配置复制一份过来，做以下改变：
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports={
entry:"./src/index.js",//入口文件
mode:"production",//模式是开发环境
output:{//出口文件时main.js，打包到当前目录的dist文件夹下
filename:"main.js",
path:path.resolve(__dirname,"dist")
},
module: {
rules: [
{
test: /\.(sc|c|sa)ss$/,//scss,css,sass
use: [
MiniCssExtractPlugin.loader,{
loader:"css-loader",
options:{
sourceMap:true
}
},{
loader:"postcss-loader",
options:{
ident:"postcss",//唯一标识，建议使用postcss
sourceMap:true,
plugins:(loader)=>[
require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
]
}
},{
loader:"sass-loader",
options:{
sourceMap:true
}
}],
}
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename:'[name].[hash].css',
chunkFilename:'[id].[hash].css',
})
],
}
执行如下命令：
npx webpack --config webpack.product.config.js
就可以用这个配置文件打包了
当然，如果我们需要多次打包 这样输入命令显得有点复杂，我们可以在package.json中的script中增加一个脚本命令：
"dist": "npx webpack --config webpack.product.config.js"
之后，运行npm run dist与上述命令等效
----------------------------------------------------------------------------------------------------------------------------------
css压缩：（生产环境才能用到）
安装这个插件
npm install optimize-css-assets-webpack-plugin --save-dev
在webpack.product.config.js配置：
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
module.exports={
entry:"./src/index.js",//入口文件
mode:"production",//模式是开发环境
output:{//出口文件时main.js，打包到当前目录的dist文件夹下
filename:"main.js",
path:path.resolve(__dirname,"dist")
},
module: {
rules: [
{
test: /\.(sc|c|sa)ss$/,//scss,css,sass
use: [
MiniCssExtractPlugin.loader,{
loader:"css-loader",
options:{
sourceMap:true
}
},{
loader:"postcss-loader",
options:{
ident:"postcss",//唯一标识，建议使用postcss
sourceMap:true,
plugins:(loader)=>[
require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
]
}
},{
loader:"sass-loader",
options:{
sourceMap:true
}
}],
}
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename:'[name].css',
chunkFilename:'[id].css',
})
],
optimization:{
minimizer:[new OptimizeCSSAssetsPlutin({})]
}
}
之后执行 npm run dist打包 即可压缩css代码
-------------------------------------------------------------------
js压缩：（生产环境用）
npm i -D uglifyjs-webpack-plugin
在webpack.product.config.js中加入配置：
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports={
entry:"./src/index.js",//入口文件
mode:"production",//模式是开发环境
output:{//出口文件时main.js，打包到当前目录的dist文件夹下
filename:"main.js",
path:path.resolve(__dirname,"dist")
},
module: {
rules: [
{
test: /\.(sc|c|sa)ss$/,//scss,css,sass
use: [
MiniCssExtractPlugin.loader,{
loader:"css-loader",
options:{
sourceMap:true
}
},{
loader:"postcss-loader",
options:{
ident:"postcss",//唯一标识，建议使用postcss
sourceMap:true,
plugins:(loader)=>[
require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
]
}
},{
loader:"sass-loader",
options:{
sourceMap:true
}
}],
},
// {
// test: /\.js$/,
// loader: 'babel-loader',
// exclude: /node_modules/,
// }
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename:'[name].css',
chunkFilename:'[id].css',
})
],
optimization:{
minimizer:[
new UglifyJsPlugin({
cache: true,
parallel: true,
/**
* sourceMap 和 devtool: 'inline-source-map', 冲突
*/
sourceMap: false, // set to true if you want JS source maps,
/**
* extractComments 导出备注
*/
extractComments: 'all'
}),
new OptimizeCSSAssetsPlutin({})
]
}
}
然后执行npm run dist 就行
----------------------------------------------------------------------------------
将es6转化转义成es5
安装：
npm i -D babel-loader babel-core babel-preset-env
在根目录新建一个.babelrc文件
配置上：
{
"presets": ["@babel/env"]
}
在webpack.product.config.js中配置：
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
--------------------------------------------------------------------------
如何将每次打包的js和css文件 自动引入到html文件中：
npm install html-webpack-plugin -D
在config.js中配置：
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports={
entry:"./src/index.js",//入口文件
mode:"production",//模式是开发环境
output:{//出口文件时main.js，打包到当前目录的dist文件夹下
filename:"main.[hash].js",
path:path.resolve(__dirname,"dist")
},
module: {
rules: [
{
test: /\.(sc|c|sa)ss$/,//scss,css,sass
use: [
MiniCssExtractPlugin.loader,{
loader:"css-loader",
options:{
sourceMap:true
}
},{
loader:"postcss-loader",
options:{
ident:"postcss",//唯一标识，建议使用postcss
sourceMap:true,
plugins:(loader)=>[
require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
]
}
},{
loader:"sass-loader",
options:{
sourceMap:true
}
}],
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename:'[name][hash].css',
chunkFilename:'[id][hash].css',
}),
new HtmlWebpackPlugin({
title:"webpack 温习",//默认值webpack App
filename:"main.html",//默认值index.html 是最终生成的文件名字
template:path.resolve(__dirname,"src/index.html"),
minify:{
collapseWhitespace:true,//是否去空白
removeComments:true,//是否移除注释
removeAttributeQuotes:true,//移除属性的引号
}
})
],
optimization:{
minimizer:[
new UglifyJsPlugin({
cache: true,
parallel: true,
/**
* sourceMap 和 devtool: 'inline-source-map', 冲突
*/
sourceMap: false, // set to true if you want JS source maps,
/**
* extractComments 导出备注
*/
extractComments: 'all'
}),
new OptimizeCSSAssetsPlutin({})
]
}
}
当然，需要在src下简历一个index.html模板
然后，执行npm run dist 即可
-----------------------------------------------------------------------
清理dist目录
每次打包 都会生成一些新的打包文件，从而之前的没用的打包文件也会保留下来，很不爽，所以我们需要一个自动清理dist目录的插件
npm install clean-webpack-plugin --save-dev
在config.js中配置：
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
entry:"./src/index.js",//入口文件
mode:"production",//模式是开发环境
output:{//出口文件时main.js，打包到当前目录的dist文件夹下
filename:"main.[hash].js",
path:path.resolve(__dirname,"dist")
},
module: {
rules: [
{
test: /\.(sc|c|sa)ss$/,//scss,css,sass
use: [
MiniCssExtractPlugin.loader,{
loader:"css-loader",
options:{
sourceMap:true
}
},{
loader:"postcss-loader",
options:{
ident:"postcss",//唯一标识，建议使用postcss
sourceMap:true,
plugins:(loader)=>[
require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
]
}
},{
loader:"sass-loader",
options:{
sourceMap:true
}
}],
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename:'[name][hash].css',
chunkFilename:'[id][hash].css',
}),
new HtmlWebpackPlugin({
title:"webpack 温习",//默认值webpack App
filename:"main.html",//默认值index.html 是最终生成的文件名字
template:path.resolve(__dirname,"src/index.html"),
minify:{
collapseWhitespace:true,//是否去空白
removeComments:true,//是否移除注释
removeAttributeQuotes:true,//移除属性的引号
}
}),
new CleanWebpackPlugin(),//清理构建文件夹
],
optimization:{
minimizer:[
new UglifyJsPlugin({
cache: true,
parallel: true,
/**
* sourceMap 和 devtool: 'inline-source-map', 冲突
*/
sourceMap: false, // set to true if you want JS source maps,
/**
* extractComments 导出备注
*/
extractComments: 'all'
}),
new OptimizeCSSAssetsPlutin({})
]
}
}
然后再次构建，dist目录会被清理一下再生成打包文件
--------------------------------------------------------------------------------------------------------
webpack处理图片
首先 打包时处理不了图片这种二进制文件的 路径，我们需要用一个file-loader插件
安装：
npm install --save-dev file-loader
在config.js中配置：
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
entry:"./src/index.js",//入口文件
mode:"production",//模式是开发环境
output:{//出口文件时main.js，打包到当前目录的dist文件夹下
filename:"main.[hash].js",
path:path.resolve(__dirname,"dist")
},
module: {
rules: [
{
test: /\.(sc|c|sa)ss$/,//scss,css,sass
use: [
MiniCssExtractPlugin.loader,{
loader:"css-loader",
options:{
sourceMap:true
}
},{
loader:"postcss-loader",
options:{
ident:"postcss",//唯一标识，建议使用postcss
sourceMap:true,
plugins:(loader)=>[
require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
]
}
},{
loader:"sass-loader",
options:{
sourceMap:true
}
}],
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{//处理图片 路径
test:/\.(png|svg|gif|jpg|jpeg)$/,
use:[
'file-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename:'[name][hash].css',
chunkFilename:'[id][hash].css',
}),
new HtmlWebpackPlugin({
title:"webpack 温习",//默认值webpack App
filename:"main.html",//默认值index.html 是最终生成的文件名字
template:path.resolve(__dirname,"src/index.html"),
minify:{
collapseWhitespace:true,//是否去空白
removeComments:true,//是否移除注释
removeAttributeQuotes:true,//移除属性的引号
}
}),
new CleanWebpackPlugin(),//清理构建文件夹
],
optimization:{
minimizer:[
new UglifyJsPlugin({
cache: true,
parallel: true,
/**
* sourceMap 和 devtool: 'inline-source-map', 冲突
*/
sourceMap: false, // set to true if you want JS source maps,
/**
* extractComments 导出备注
*/
extractComments: 'all'
}),
new OptimizeCSSAssetsPlutin({})
]
}
}
这样，打包时，图片路径就不会报错了
打包后，dist中会多出打包后的图片文件
那么，如果我们想将图片进行优化呢？
我们需要借助一个插件：
npm install image-webpack-loader --save-dev
config.js配置：
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
entry:"./src/index.js",//入口文件
mode:"production",//模式是开发环境
output:{//出口文件时main.js，打包到当前目录的dist文件夹下
filename:"main.[hash].js",
path:path.resolve(__dirname,"dist")
},
module: {
rules: [
{
test: /\.(sc|c|sa)ss$/,//scss,css,sass
use: [
MiniCssExtractPlugin.loader,{
loader:"css-loader",
options:{
sourceMap:true
}
},{
loader:"postcss-loader",
options:{
ident:"postcss",//唯一标识，建议使用postcss
sourceMap:true,
plugins:(loader)=>[
require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
]
}
},{
loader:"sass-loader",
options:{
sourceMap:true
}
}],
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{//处理图片 路径
test:/\.(png|svg|gif|jpg|jpeg)$/,
include:[path.resolve(__dirname,'src/')],
use:[
'file-loader',
{
loader: 'image-webpack-loader',
},
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename:'[name][hash].css',
chunkFilename:'[id][hash].css',
}),
new HtmlWebpackPlugin({
title:"webpack 温习",//默认值webpack App
filename:"main.html",//默认值index.html 是最终生成的文件名字
template:path.resolve(__dirname,"src/index.html"),
minify:{
collapseWhitespace:true,//是否去空白
removeComments:true,//是否移除注释
removeAttributeQuotes:true,//移除属性的引号
}
}),
new CleanWebpackPlugin(),//清理构建文件夹
],
optimization:{
minimizer:[
new UglifyJsPlugin({
cache: true,
parallel: true,
/**
* sourceMap 和 devtool: 'inline-source-map', 冲突
*/
sourceMap: false, // set to true if you want JS source maps,
/**
* extractComments 导出备注
*/
extractComments: 'all'
}),
new OptimizeCSSAssetsPlutin({})
]
}
}
--------------------------------------------------------------------------------
将图片进一步优化处理 成base64
将图片转化成base64的dataurl的形式，提高页面性能
npm install --save-dev url-loader
我们只需要将file-loader变成url-loader即可：
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
entry:"./src/index.js",//入口文件
mode:"production",//模式是开发环境
output:{//出口文件时main.js，打包到当前目录的dist文件夹下
filename:"main.[hash].js",
path:path.resolve(__dirname,"dist")
},
module: {
rules: [
{
test: /\.(sc|c|sa)ss$/,//scss,css,sass
use: [
MiniCssExtractPlugin.loader,{
loader:"css-loader",
options:{
sourceMap:true
}
},{
loader:"postcss-loader",
options:{
ident:"postcss",//唯一标识，建议使用postcss
sourceMap:true,
plugins:(loader)=>[
require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
]
}
},{
loader:"sass-loader",
options:{
sourceMap:true
}
}],
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{//处理图片 路径
test:/\.(png|svg|gif|jpg|jpeg)$/,
include:[path.resolve(__dirname,'src/')],
use:[
{
loader:'url-loader',
options:{//小于10000字节的图片转换成base64格式
limit:10000
}
},
{
loader: 'image-webpack-loader',
},
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename:'[name][hash].css',
chunkFilename:'[id][hash].css',
}),
new HtmlWebpackPlugin({
title:"webpack 温习",//默认值webpack App
filename:"main.html",//默认值index.html 是最终生成的文件名字
template:path.resolve(__dirname,"src/index.html"),
minify:{
collapseWhitespace:true,//是否去空白
removeComments:true,//是否移除注释
removeAttributeQuotes:true,//移除属性的引号
}
}),
new CleanWebpackPlugin(),//清理构建文件夹
],
optimization:{
minimizer:[
new UglifyJsPlugin({
cache: true,
parallel: true,
/**
* sourceMap 和 devtool: 'inline-source-map', 冲突
*/
sourceMap: false, // set to true if you want JS source maps,
/**
* extractComments 导出备注
*/
extractComments: 'all'
}),
new OptimizeCSSAssetsPlutin({})
]
}
}
----------------------------------------------------------------------------------
如何将不同环境的webpack配置文件合并，将共同配置共用？
npm install --save-dev webpack-merge
首先，我们需要改变配置文件的结构，之前是webpack.config.js和webpack.product.config.js分别充当 开发和生产环境配置，
现在我们分为webpack.common.js、webpack.dev.js、webpack.prod.js 这三个文件分别写着公共配置、开发环境特有配置、生产环境特有配置
下面写出栅格文件的内容：
webpack.common.js:
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
entry:"./src/index.js",//入口文件
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{//处理图片 路径
test:/\.(png|svg|gif|jpg|jpeg)$/,
include:[path.resolve(__dirname,'src/')],
use:[
{
loader:'url-loader',
options:{//小于10000字节的图片转换成base64格式
limit:10000
}
},
{
loader: 'image-webpack-loader',
},
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title:"webpack 温习",//默认值webpack App
filename:"main.html",//默认值index.html 是最终生成的文件名字
template:path.resolve(__dirname,"src/index.html"),
minify:{
collapseWhitespace:true,//是否去空白
removeComments:true,//是否移除注释
removeAttributeQuotes:true,//移除属性的引号
}
}),
new CleanWebpackPlugin(),//清理构建文件夹
],
}
webpack.dev.js:
const path = require("path");
const merge = require('webpack-merge');//引入webpack-merge参数
const common = require('./webpack.common');//将webpack.common.js引入
let devConfig={
mode:"development",//模式是开发环境
output:{//出口文件时main.js，打包到当前目录的dist文件夹下
filename:"main.js",
path:path.resolve(__dirname,"dist")
},
module: {
rules: [
{
test: /\.(sc|c|sa)ss$/,//scss,css,sass
use: ["style-loader",{
loader:"css-loader",
options:{
sourceMap:true
}
},{
loader:"postcss-loader",
options:{
ident:"postcss",//唯一标识，建议使用postcss
sourceMap:true,
plugins:(loader)=>[
require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
]
}
},{
loader:"sass-loader",
options:{
sourceMap:true
}
}],
}
]
}
}
module.exports=merge(common,devConfig);//第一个参数是基本配置 后面的参数是当前配置
webpack.prod.js:
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const merge = require('webpack-merge');//引入webpack-merge参数
const common = require('./webpack.common');//将webpack.common.js引入
let prodConfig={
mode:"production",//模式是开发环境
output:{//出口文件时main.js，打包到当前目录的dist文件夹下
filename:"main.[hash].js",
path:path.resolve(__dirname,"dist")
},
module: {
rules: [
{
test: /\.(sc|c|sa)ss$/,//scss,css,sass
use: [
MiniCssExtractPlugin.loader,{
loader:"css-loader",
options:{
sourceMap:true
}
},{
loader:"postcss-loader",
options:{
ident:"postcss",//唯一标识，建议使用postcss
sourceMap:true,
plugins:(loader)=>[
require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
]
}
},{
loader:"sass-loader",
options:{
sourceMap:true
}
}],
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename:'[name][hash].css',
chunkFilename:'[id][hash].css',
}),
],
optimization:{
minimizer:[
new UglifyJsPlugin({
cache: true,
parallel: true,
/**
* sourceMap 和 devtool: 'inline-source-map', 冲突
*/
sourceMap: false, // set to true if you want JS source maps,
/**
* extractComments 导出备注
*/
extractComments: 'all'
}),
new OptimizeCSSAssetsPlutin({})
]
}
}
module.exports=merge(common,prodConfig);
还有在package.json中记得把执行命令的--config改一下
{
"name": "webpack1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npx webpack --config webpack.dev.js",
"dist": "npx webpack --config webpack.prod.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.6.0",
"@babel/plugin-transform-runtime": "^7.6.0",
"@babel/preset-env": "^7.6.0",
"@babel/runtime-corejs2": "^7.6.0",
"autoprefixer": "^9.6.1",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^6.0.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^2.1.0",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.8",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"@babel/polyfill": "^7.6.0",
"@babel/runtime": "^7.6.0",
"lodash": "^4.17.15"
}
}
------------------------------------------------------------------------------------------------------------------------------
js启用sourcemap
webpack4默认可以启用sourcemap
只需要在config文件中加上：(这个通常放在开发环境中)
devtool:'inline-source-map'
这样在开发环境下，就可以看到执行的js具体是在哪个文件下的第几行执行的
-----------------------------------------------------------------------------------------------------------------
监控文件变化，启用watch，当代码发生变化时，自动编译，自动打包
在webpack启动的时候 加上一个 --watch命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npx webpack --watch --config webpack.dev.js",
"dist": "npx webpack --config webpack.prod.js"
},
-------------------------------------------------------------------------------------------------------------------
webpack-dev-server和热更新
webpack-dev-server提供了一个Web服务器，能够实加载，它内置了webpack的编译功能，是直接编译在内存里，而不是编译在dist文件里，
先安装webpack-dev-server
npm install --save-dev webpack-dev-server
在webpack.dev.js：
const path = require("path");
const merge = require('webpack-merge');//引入webpack-merge参数
const common = require('./webpack.common');//将webpack.common.js引入
const webpack = require('webpack');
let devConfig={
mode:"development",//模式是开发环境
devtool:'inline-source-map',//开启sourcemap 方便js调试
output:{//出口文件时main.js，打包到当前目录的dist文件夹下
filename:"main.js",
path:path.resolve(__dirname,"dist")
},
devServer: {
contentBase: path.join(__dirname,"dist"), //告诉服务器 哪里提供内容，默认情况下将使用当前工作目录作为提供内容的目录
port: 8080, //端口号设为8080, 默认也是8080
clientLogLevel:'warning',//可能的值none、error、warning、info(默认值)
hot:true,//启用webpack的模块热替换特性，这个需要配合webpack.HotModuleReplacementPlugin插件
compress:true,//一切服务都启用gzip压缩
host:'localhost',//指定使用一个host，默认是localhost，如果你希望服务器外部可访问0.0.0.0
open:true,//是否打开浏览器
overlay:{//出现错误或者警告的时候，是否覆盖页面线上错误消息
warnings:true,
errors:true
},
publicPath:'/',//此路径下的打包文件 可在浏览器上访问
proxy:{
"/api":{
target:"http://192.168.0.102:8080",
pathRewrite:{
"^/api":"/mockjsdata/5/api",
// /api/getuser => http://192.168.0.102:8080/mockjsdata/5/api/getuser
}
}
},
quiet:true,//启动quiet后，除了初始启动信息之外的任何内容都不会显示
watchOptions:{//监视文件相关控制选项
poll:true,//webpack使用文件系统（file system）获取文件改动的通知，在某些情况下不会正常工作
ignored:/node_modules/,//忽略监控的文件夹，正则
aggregateTimeout:300,//默认值，当第一个文件改变，会在重新构建前增加延迟
}
},
module: {
rules: [
{
test: /\.(sc|c|sa)ss$/,//scss,css,sass
use: ["style-loader",{
loader:"css-loader",
options:{
sourceMap:true
}
},{
loader:"postcss-loader",
options:{
ident:"postcss",//唯一标识，建议使用postcss
sourceMap:true,
plugins:(loader)=>[
require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
]
}
},{
loader:"sass-loader",
options:{
sourceMap:true
}
}],
}
]
},
plugins:[
new webpack.NamedModulesPlugin(),//更容易查看path 的估值
new webpack.HotModuleReplacementPlugin(),//替换插件
]
}
module.exports=merge(common,devConfig);//第一个参数是基本配置 后面的参数是当前配置
之后执行 npx webpack-dev-server --config webpack.dev.js 就会打开服务器，另外需要注意的是，webpack-dev-server内置了webpack的打包功能，但是它时打包到了内存中，而不是dist文件中
当然每次这样执行命令太长了，就把它加到script的命令中：
"start": "npx webpack-dev-server --config webpack.dev.js"
-------------------------------------------------------------------------------------------------------------
babel优化
js启用babel转码：es6转化为es5
安装
npm i -D babel-loader babel-core babel-preset-env
在公共webpack.common.js中添加：
module: {
rules: [
{
},
]
},
记得在根目录下创建一个.babelrc文件
{
"presets": ["@babel/env"]
}
----------------------------------
另外 我们在项目中可能在多个模块中重复引用同个文件，这样当babel转码时会一次性将这些重复文件都转码过去，造成文件体积变大，此时需要用到插件，将这些公共的文件提取出来。
npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save
在.babelrc中配置：
{
"presets": ["@babel/env"]
}
------------------------------------------------------------------------------------------
eslint校验：
安装：
npm install eslint --save-dev
npm install eslint-loader --save-dev
以下是用到的额外的需要安装的eslint的解释器、校验规则等
npm i -D babel-eslint standard
在common.js中增加配置
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
entry:"./src/index.js",//入口文件
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use:[{
loader: 'babel-loader',
options:{
cacheDirectory:true,//开启缓存 加快babel转码
}
},{//一定要放在下面 先执行eslint检测 再转义 因为webpack是从后往前执行的
loader:'eslint-loader',
options:{
fix:true,//如有语法错误 自动修复
}
}]
},
{//处理图片 路径
test:/\.(png|svg|gif|jpg|jpeg)$/,
include:[path.resolve(__dirname,'src/')],
use:[
{
loader:'url-loader',
options:{//小于10000字节的图片转换成base64格式
limit:10000
}
},
{
loader: 'image-webpack-loader',
},
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title:"webpack 温习",//默认值webpack App
filename:"main.html",//默认值index.html 是最终生成的文件名字
template:path.resolve(__dirname,"src/index.html"),
minify:{
collapseWhitespace:true,//是否去空白
removeComments:true,//是否移除注释
removeAttributeQuotes:true,//移除属性的引号
}
}),
new CleanWebpackPlugin(),//清理构建文件夹
],
}
在跟目录添加.eslintrc.js文件
module.exports={
root:true,//是不是我们的根目录
parserOptions: {
parser:'babel-eslint'
},
env:{
browser:true,
},
extends:[
'standard'
],
globals:{
NODE_ENV:false
},
rules:{
'generator-star-spacing':'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error':'off',
//添加分号 必须
'semi':['error','always'],
'no-unexpected-multiline':'off',
'space-before-function-paren':['error','never'],
'quotes':[
'error',
'single',
{
'avoidEscape':true
}
]
}
}
在根目录加.eslintignore文件
/dist/
/node-modules/
/*.js
--------------------------------------------------------------------------------------------
resolve解析，当我们引入一个文件时，比如import _ from './src/dev.js'
我们可以将路径配置一个别名，方便引入模块
在common.js中可以加一条配置：
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlutin=require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
entry:"./src/index.js",//入口文件
resolve:{
alias:{
'@':path.resolve(__dirname,'src/')
},
extensions:[".js",".vue",".json"],//默认.js .json
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use:[{
loader: 'babel-loader',
options:{
cacheDirectory:true,//开启缓存 加快babel转码
}
},{//一定要放在下面 先执行eslint检测 再转义 因为webpack是从后往前执行的
loader:'eslint-loader',
options:{
fix:true,//如有语法错误 自动修复
}
}]
},
{//处理图片 路径
test:/\.(png|svg|gif|jpg|jpeg)$/,
include:[path.resolve(__dirname,'src/')],
use:[
{
loader:'url-loader',
options:{//小于10000字节的图片转换成base64格式
limit:10000
}
},
{
loader: 'image-webpack-loader',
},
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title:"webpack 温习",//默认值webpack App
filename:"main.html",//默认值index.html 是最终生成的文件名字
template:path.resolve(__dirname,"src/index.html"),
minify:{
collapseWhitespace:true,//是否去空白
removeComments:true,//是否移除注释
removeAttributeQuotes:true,//移除属性的引号
}
}),
new CleanWebpackPlugin(),//清理构建文件夹
],
}
---------------------------------------------------------------------------------
webpack 配置外部拓展（externals） cdn也可以全局引入
在common.js中再增加一个配置 已引入jquery为例
externals:{
jquery:"jQuery",//写法有多种可以查一下
},
这样就可以在main,js中import $ from 'jquery' 来全局引入jquery 另外这样做有个好处就是 jquery不会打包到bundle里去 大大减少文件体积
-----------------------------------------------------------------------------------------
如何让webpack打包后生成分析报表
安装
npm install --save-dev webpack-bundle-analyzer
在dev.js中配置
const path = require("path");
const merge = require('webpack-merge');//引入webpack-merge参数
const common = require('./webpack.common');//将webpack.common.js引入
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
let devConfig={
mode:"development",//模式是开发环境
devtool:'inline-source-map',//开启sourcemap 方便js调试
output:{//出口文件时main.js，打包到当前目录的dist文件夹下
filename:"main.js",
path:path.resolve(__dirname,"dist")
},
devServer: {
contentBase: path.join(__dirname,"dist"), //告诉服务器 哪里提供内容，默认情况下将使用当前工作目录作为提供内容的目录
port: 8080, //端口号设为8080, 默认也是8080
clientLogLevel:'warning',//可能的值none、error、warning、info(默认值)
hot:true,//启用webpack的模块热替换特性，这个需要配合webpack.HotModuleReplacementPlugin插件
compress:true,//一切服务都启用gzip压缩
host:'localhost',//指定使用一个host，默认是localhost，如果你希望服务器外部可访问0.0.0.0
open:true,//是否打开浏览器
overlay:{//出现错误或者警告的时候，是否覆盖页面线上错误消息
warnings:true,
errors:true
},
publicPath:'/',//此路径下的打包文件 可在浏览器上访问
proxy:{
"/api":{
target:"http://192.168.0.102:8080",
pathRewrite:{
"^/api":"/mockjsdata/5/api",
// /api/getuser => http://192.168.0.102:8080/mockjsdata/5/api/getuser
}
}
},
quiet:true,//启动quiet后，除了初始启动信息之外的任何内容都不会显示
watchOptions:{//监视文件相关控制选项
poll:true,//webpack使用文件系统（file system）获取文件改动的通知，在某些情况下不会正常工作
ignored:/node_modules/,//忽略监控的文件夹，正则
aggregateTimeout:300,//默认值，当第一个文件改变，会在重新构建前增加延迟
}
},
module: {
rules: [
{
test: /\.(sc|c|sa)ss$/,//scss,css,sass
use: ["style-loader",{
loader:"css-loader",
options:{
sourceMap:true
}
},{
loader:"postcss-loader",
options:{
ident:"postcss",//唯一标识，建议使用postcss
sourceMap:true,
plugins:(loader)=>[
require("autoprefixer")({overrideBrowserslist:["> 0.15% in CN"]}),//浏览器 份额大于0.15% 在中国 (已经包括IE8了)
]
}
},{
loader:"sass-loader",
options:{
sourceMap:true
}
}],
}
]
},
plugins:[
new webpack.NamedModulesPlugin(),//更容易查看path 的估值
new webpack.HotModuleReplacementPlugin(),//替换插件
new BundleAnalyzerPlugin(),//生成打包报表
]
}
module.exports=merge(common,devConfig);//第一个参数是基本配置 后面的参数是当前配置
然后 打包一下，就会出现报表
webpack4温习总结的更多相关文章
- 前端框架 EasyUI （0） 重新温习（序言）
几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...
- PowerDesigner将PDM导出生成WORD文档--温习老知识
转:http://www.cnblogs.com/wudiwushen/archive/2010/05/13/1734812.html 今天的温习老知识,是如何将一个PD设计的PDM来导出WORD文档 ...
- mini-css-extract-plugin 的用法（webpack4）
今天在使用webpack的extract-text-webpack-plugin插件提取单独打包css文件时,报错,说是这个插件要依赖webpack3的版本. 后面查了一下,webpack4得使用mi ...
- webpack4: compilation.mainTemplate.applyPluginsWaterfall is not a function 解决方法
今天捣鼓webpack4踩到一个弥天大坑:使用html-webpack-plugin打包html的时候一直报 compilation.mainTemplate.applyPluginsWaterfal ...
- webpack4新特性介绍
导语: webpack是一个JS应用打包器, 它将应用中的各个模块打成一个或者多个bundle文件.借助loaders和plugins,它可以改变.压缩和优化各种各样的文件.它的输入是不同的资源,比如 ...
- R数据分析 第一篇：温习概率论
概率论是人们在长期实践中发现的理论,是客观存在的.自然界和社会上发生的现象是多种多样的,有一类现象,在一定条件下必然发生,称作确定性现象,而概率论研究的现象是不确定性现象,嗯嗯,醒醒,概率论研究的对象 ...
- webpack4.1.1的使用详细教程
安装全局webpack cnpm install -g webpack 安装全局webpack-cli npm install -g webpack-cli 初始化:生成package.json文件 ...
- webpack4.x配置详解，多页面，多入口，多出口，新特性新坑！！
花了差不多一天多的时间,重新撸了一遍webpack4.x的常用配置. 基本上常用的配置都熟悉了一遍,总体上来讲,为了对parcel进行反击,webpack从4.x开始,正在朝着尽可能的简化配置文件的方 ...
- webpack4 splitChunksPlugin && runtimeChunkPlugin 配置杂记
webpack2 还没研究好,就发现升级到4了,你咋这么快~ 最近要做项目脚手架,项目构建准备重新做,因为之前写的太烂了...然后发现webpack大版本已经升到4了(又去看了一眼,4.5了),这么快 ...
随机推荐
- 立体像对空间前方交会-共线方程求解法（python实现）
一.原理 二.步骤 a.用各自像片的角元素计算出左右像片的旋转矩阵R1和R2. b.有同名像点列出共线方程. c.将方程写为未知数的线性方程形式,计算线性系数. d.写出误差方程,系数矩阵与常数项. ...
- metasploit安卓木马
metasploit---安卓木马入侵 (仅供学习使用,禁止非法使用) 1.生成木马程序 msfvenom -p android/meterpreter/reverse_tcp LHOST=本机ip ...
- idea中异常处理快捷键
键盘按下 alt+Enter 一般选择try/catch这一个
- python OpenCV使用
关于OpenCV简介 OpenCV是一个基于BSD许可(开源)发行的跨平台计算机视觉库,可以运行在Linux.Windows.Android和Mac OS操作系统上.它轻量级而且高效——由一系列 C ...
- ASP.NET使用window.event.keycode来获取按下的键盘值！
window.event.keycode-获取按下的键盘值 这里只列出了一些较常用的键盘值更加详细的键盘值请访问此人博客:https://www.cnblogs.com/z-sm/p/3597592. ...
- SQL注入是什么？如何防止？
SQL注入是什么?如何防止? SQL注入是一种注入攻击,可以执行恶意SQL语句.下面本篇文章就来带大家了解一下SQL注入,简单介绍一下防止SQL注入攻击的方法,希望对大家有所帮助. 什么是SQL注入? ...
- Flask之Local、LocalStack和LocalProxy
在我们使用Flask以及Werkzeug框架的过程中,经常会遇到如下三个概念:Local.LocalStack和LocalProxy.尤其在学习Flask的Request Context和App Co ...
- Python 获取环境变量的几种方式
第一种 import os os.environ.get('key_name') 第二种 import os os.getenv('key_name') 第三种 import os os.getenv ...
- Linux命令——ldd和ldconfig
转自:Linux系统中“动态库”和“静态库”那点事儿 前言 在调试lua脚本的时候,报错. 我已经再lua脚本中更改了cpath package.cpath = package.cpath .. &q ...
- Linux VPS搭建蚂蚁笔记Leanote私有云笔记存储平台
一.基础环境LNMP 安装nginx: yum install epel-release -y yum install nginx -y # 启动 nginx systemctl start ngin ...