webpack使用指南

webpack本地安装和打包

 1 创建目录
 2 cd 当前目录
 3 npm init -y   // 初始化
 4 npm install webpack webpack-cil --save-dev //本地安装
 4 或者 yarn add webpack webpack-cli --dev //本地安装
 5 ./node_modules/.bin/webpack //调用本地安装的webpack
 ./node_modules/.bin/webpack --version // 查看本地webpack的版本
 5 或者 npx webpack //自动查找webpack、但遇到空格目录就会报错

配置webpack.fonfig.js（开发模式）

这个文件是配置webpack打包模式和一些详细内容的
mode

• production ： 生产模式 - 给用户用的
• development ： 开发模式 - 开发者用的

entry

• ‘./src/index.js’ ：默认入口

output

• path： js生成后的目录地址
• filename： ‘[name].[contenthash].js’ //转移后的JS文字名字，便于添加缓存

HTTP响应头中的Cache-Control

• http缓存-文件缓存-可设置缓存存在多久、可设置缓存时间一年，文件都不用去服务器访问
• 通过’[name].[contenthash].js’哈希的方式，设置文件名，每当内容变了会更新另外一个文件，因为文件名不同会更新HTTP的响应头从而刷新缓存
• 这个方法的代价是：首页不能缓存，因为首页缓存后就无法让Cache-Control 响应新的文件

plugins - 自动生成html

• new HtmlWebpackPlugin({
• title: ‘My App’,
• filename: ‘assets/admin.html’ // 生成一个html文件
• template: ‘src/assets/admin.html’ // 引用目录下的html文件 <%= htmlWebpackPlugin.options.title %> 使用配置文件里的title
• })

引入css（开发模式）

css-loader

npm install --save-dev css-loader

style-loader

npm install --save-dev style-loader

module
rules:

• test: /\ .css$/i, // 用正则检测css文件
• use: [‘style-loader’, ‘css-loader’] // 然后用css-loader读到js文件里面，并用style-loader变成style标签放到html里面

抽离成css文件（生产模式）

npm install --save-dev mini-css-extract-plugin

new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[id].[contenthash].css',
ignoreOrder: false
)}

webpack-dev-server（开发模式）

这个服务不会生成目录，是在内存里运行的

npm install --save-dev webpack-dev-server

devtool:'inline-source-map'
devServer: {contentBase: './dist'}

scripts - "指令名字" ："指令句式"
"start": "webpack-dev-server --open" // 运行start就可以使用了
"build": "rm -rf dist && webpack" // 这样可以每次更新内容时不用手敲rm，避免忘记敲rm，运行npm run build就可以执行后面设置的指令

配置webpack.config.prod.js(生产模式)

package.json文件里
scripts - "指令名字" ："指令句式"
"build": "rm -rf dist && webpack --config webpack.config.prod.js" //设置使用生产模式的配置

设置共有属性 - webpack.config.base.js

总结

 1. 本地安装webpack
 2. 配置并设置html和css，js的生成规则
 3. css需要另外下载配置预处理器，style、css-loader。  		
 	* plugin和loader的区别:  他们的区别是一个是用来加载文件的一个是用来扩展功能的。	  		
 	* plugin（插件）：通常是把多个文件打包成单个文件。  		
 	* cssplugin:是通过MiniCssExtractPlugin插件把N个css合并成1个css文件。)	 	  		
 	* htmlplugin:是通过HtmlWebpackPlugin插件把0或者1个文件（是否1个取决于是否配置）打包成一个新的html文件，新的文件引入了css和html。)	
 	
	* loader（加载器）：通常是把单个文件打包成单个文件。

 5. html和js只需在config文件里配置就可以了，webpack自带loader功能
 6. webpack-dev-server和http-server -c-1 分别是开发和生产模式下的预览页面功能
 7. 设置package.json分开 - 开发和生产配置

sass和less和stylus

dart-sass安装

node-sass 因为在国外部署，国内容易被墙所以特别难配置，不推荐使用

npm install sass-loader dart-sass --save-dev

// 配置
options:{
implementation: require('dart-sass')
}

less-loader安装

npm install less-loader --save-dev
npm install less--dev

test: /\.less$/
loader: ['style-loader', 'css-loader',['less-loader']]

stylus安装

在ide安装拓展
npm install stylus-loader --save-dev
npm install stylus --save-dev

test: /\.styl$/
loader: ['style-loader', 'css-loader',['stylus-loader']]

总结：sass和less和stylus完全没区别。

file-loader引入图片

作用：把文件变成文件路径

npm install file-loader --save-dev

{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},],

懒加载

某个文件很大不想一开始就加载，等一会再加载，也可以设置事件触发加载
用import(文件地址)加载一个文件，然后会得到一个promise，通过.then方法处理。

const promise = import('./lazy')
promise.then((module)=>{
	module.default()
},
()=>{})