webpack

安装本地的webpack4.0：

npm install webpack webpack-cli -D

1.npm init -y
初始化：
-y 的含义：yes的意思，在init的时候省去了敲回车的步骤，生成的默认的package.json

2.npm add webpack webpack-cli -D:
生成node_modules\package-lock.json

建src文件夹=》index.js
打包命令npx webpack
生成dist/main.js

模块化导出导入：
在dist里面新建index.html，script里导入当前文件中main.js

然后新建a.js 里面写module.exports=‘zfbx’;

在index.js里面写let str=require(’./a.js’);

console.log(str),

再执行npx webpack打包命令

新建webpack.config.js

配置如下：

改变webpackconfig.js名字：

（1）要想可以改变名字cmd里输入
npx webpack --config 《webpack.config.js新名字》

（2）同样可以再package.json里面配置scripts里面写
“build”:“webpack --config <webpack.config.js新名字>”，
但是执行命令变为
npm run build

（3）同样可以再package.json里面配置scripts里面写
“build”:"webpack "，
但是执行命令变为
npm run build – --config 《webpack.config.js新名字》

webpack开发服务器：

1.自动打包功能
安装webpack-dev-server 插件：
npm install webpack-dev-server
错误：npm add webpack-dev-server-D
然后执行 npx webpack-dev-server，生成一个localhost地址，配置webpack.config.js配置
devServer:{
port:8000, //端口设置
progress:true,
// 添加打包文件夹路径
contentBase:"./dist"
},
package.json里面配置：
“scripts”: {
“dev”: “webpack-dev-server --open”
},
运行命令npm run dev

当先执行npm run dev时通过访问localhost:8080 会默认访问根目录下的
index.html 文件, 若跟目录下没有index.html文件就会将当前项目目录展示在网页上。但是我们希望访问localhost:8080时 访问的dist文件夹下的文件，所以要在webpack.config.js中配置 devServer(开发服务器),同理有无index.html文件时看到的结果和上面一样,

安装：生成预览界面
1.npm install html-webpack-plugin --save -D

webpack.config.js里面配置plugings

2.let htmlWebpackPlugin = require(‘html-webpack-plugin’);
3. plugins: [ // 插件 数组 放所有webpack插件
new htmlWebpackPlugin({
template: ‘./src/index.html’,//指定模板
filename: ‘index.html’,//打包后的文件名 默认也是index.html
minify: {//压缩
removeAttributeQuotes: true,//去除html页面中的双引号
collapseWhitespace: true//显示在一行上
},
hash: true,//添加hash 是在index.html页面里面引入js时候给js添加hash 并不是index.html文件 名添加hash
}),
],

loader：

新建index.css在src里面，在index.js里面

require(’./index.css’)

安装css-loader：

1.npm install css-loader style-loader -D
2.module: { rules: [ { test: [/.css/],use: [‘style-loader’, ‘css-loader’], }, ] },
3.然后重新启动npm run dev

安装less-loader：

1.npm install less less-loader -D

2.module: { rules: [ { test: [/.less/],use: [‘style-loader’, ‘css-loader’,‘less-loader’]}, ] },
3.然后重新启动npm run dev

安装sass-loader：

1.npm install node-sass sass-loader -D
2. rules: [{
test: /.scss$/,
use: [{
loader: “style-loader” // 将 JS 字符串生成为 style 节点
}, {
loader: “css-loader” // 将 CSS 转化成 CommonJS 模块
}, {
loader: “sass-loader” // 将 Sass 编译成 CSS
}]
}]
3.然后重新启动npm run dev

抽离css样式插件:打包到一个main.css中去

1.npm install mini-css-extract-plugin -D

2.webpack.config:
（1）let MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);//引入
（2）new MiniCssExtractPlugin({
filename: ‘main.css’,
}),//注册
（3）使用：
module: {
rules: [
{
test: [/.css/],
use: [MiniCssExtractPlugin.loader, ‘css-loader’],
},
{
test: [/.less/],
use: [MiniCssExtractPlugin.loader, ‘css-loader’,‘less-loader’]
},
]
},

css3打包后自动追加前缀插件：autoprefixer

1.npm install postcss-loader autoprefixer -D

2.新建一个 postcss.config.js 文件，输入:
module.exports = {
plugins: [
require(‘autoprefixer’)
]
}

3.webpack.config.js：
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: [“style-loader”, “css-loader”, “postcss-loader”]
}
]
}
}

压缩css：

1.npm install optimize-css-assets-webpack-plugin -D
//用来对css文件进行压缩，从而减小js文件的大小，加速load速度。

2.npm install uglifyjs-webpack-plugin -D
//用来对js文件进行压缩，从而减小js文件的大小，加速load速度。
这两个必须一起使用

es6转化

1.安装

npm install @babel/core babel-loader @babel/preset-env -D

2…webpack：
{
test: /.js$/, use: {
loader: ‘babel-loader’, options: {
presets: [’@babel/preset-env’]
}
}
},

转化es7：

1.安装：
npm install @babel/plugin-proposal-class-properties -D

2. {
   test: /.js$/, use: {
   loader: ‘babel-loader’, options: {
   presets: [’@babel/preset-env’],
   plugins: [’@babel/plugin-proposal-class-properties’]
   }
   }
   },

webpack 打包图片

1.安装
npm install url-loader file-loader -D

2.rules:
{
test: /.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use: ‘url-loader?limit=16940’
},

[插件3 CSS] optimize-css-assets-webpack-plugin

1.安装
npm install optimize-css-assets-webpack-plugin -D

这个插件可以接受下列配置(均为可选)：

assetNameRegExp: 正则表达式，用于匹配需要优化或者压缩的资源名。默认值是 /.css$/g
cssProcessor: 用于压缩和优化CSS 的处理器，默认是 cssnano.这是一个函数，应该按照 cssnano.process 接口(接受一个CSS和options参数，返回一个Promise)
canPrint: {bool} 表示插件能够在console中打印信息，默认值是true

UglifyJsPlugin

UglifyJS Webpack Plugin插件用来缩小（压缩优化）js文件，至少需要Node v6.9.0和Webpack v4.0.0版本。

1.安装
npm install uglifyjs-webpack-plugin --save-dev

加入jquery：

先安装加载器expose-loader，用于将插件暴露到全局中供其他模块使用:
npm i expose-loader --save

安装JQuery:
npm install jquery --save
以上两个模块也是项目发布依赖的模块，因此安装参数选择–save。

1.第一种方法：在打包入口文件中直接require并用expose-loader暴露$到全局

打包入口文件./src/index.js中引入JQuery:

require(“expose-loader?$!jquery”);

在html文件中引入测试是否全局可用./dist/index.html:

2.第二种方法：在打包入口文件引入JQuery，在配置文件中暴露到全局

项目根目录创建配置文件./conf/webpack.dev.js:

const path = require(“path”);
module.exports = {
mode: “development”, //打包为开发模式
entry: “./src/index”, //入口文件
output: { //输出路径和文件名，使用path模块resolve方法将输出路径解析为绝对路径
path: path.resolve(__dirname, “…/dist”),
filename: “main.js”
},
module: {
rules: [
//暴露KaTeX parse error: Expected '}', got 'EOF' at end of input: … options: '’
}]
}
]
}
}

入口文件中./src/index.js引入jquery:

require(“jquery”);