###1 webpack基础
webpack安装步骤
npm init -y
npm webpack webpack-cli -D
### 以上生成 package.json 和 node_modules；增加src文件夹>index.js，设置package.json
"scripts": {
"build":"webpack --mode development", // mode production
}
### npm run build 打包出来 dist， -- mode production 会出来压缩的js
### 增加webpack.config.js (一般放在项目根目录下面) 来配置webpack
### 增加webpack.config.js （放在script下面，也该改个名字-->config.js）,需要在package.json设置；打包出来的文件目录会有问题，需要设置webpcak的output的 path，保持正常的dist目录结构，使用process.cwd()
package.json:
"scripts": {
"build":"webpack --mode development --config script/webpack.config.js",
},
webpack.config.js:
output:{
// path: path.resolve(__dirname,"dist"),
path: path.resolve(process.cwd(),"dist"),// 保持正常的dist目录结构，使用process.cwd()
}
### 2.webpack的一些基础插件 html-webpack-plugin
增加html-webpack-plugin 构建后在dist里自动生成index.html
npm i --save-dev html-webpack-plugin
webpack.config.js:
const HtmlWebpackPlugins=require('html-webpack-plugin')
plugins:[
new HtmlWebpackPlugins()
]
###2.2 创建自己的模板html ，新建public文件夹，新建index.html
public>index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>
webpack.config.js:
plugins:[
new HtmlWebpackPlugins({
title:'webpack',
template:'public/index.html'
})
]
### 3.webpack的loader
loader -->style-loader在html中运行时通过js会在header标签中插入 <style></style>
npm install --save-dev style-loader css-loader
src>index.css
webpack.config.js:
module: {
rules:[
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
]
},
### loader -->mini-css-extract-plugin在dist文件夹中生成 css文件夹，在index.html的header标签里自动通过<link>引入css
extract-text-webpack-plugin（webpack3）-->mini-css-extract-plugin (webpack4)
npm install --save-dev mini-css-extract-plugin
或 npm i mini-css-extract-plugin -D
webpack.config.js: 'style-loader'--> MiniCssExtractPlugin.loader
module: {
rules:[
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
]
},
### npm cache clean --force (npm报莫名其妙的错时，清除缓存)
### 4. devserver下outputFile不能用chunkHash，要用hash；原因是 开发环境的热更新跟chunkHash有冲突的，二者只能取一,下面代码写了兼容，即开发环境时使用hash，生产环境使用chunkHash
npm install webpack-dev-server --save-dev ;
webpack.config.js：
const devMode = process.env.NODE_ENV !== 'production';
output:{
filename:devMode ? 'static/js/[name].[hash:8].js':'static/js/[name].[chunkHash:8].js'
},
package.json:
"dev": "webpack-dev-server --hot --mode development --config script/webpack.config.js --open chrome ",
### 5 less scss 使用loader; css less scss三者可共存
npm install less-loader less --save-dev
npm install sass-loader node-sass webpack --save-dev
webpack.config.js：
module: {
rules:[
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'， 'less-loader'],
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader','sass-loader'],
},
]
### 6 postcss-loader autoprefix 自动添加前缀，browserslist检测之后 去加前缀
npm i postcss-loader autoprefixer -D
6.1 在根目录下新建一个postcss.config.js:
plugins: [
require('autoprefixer')
]
webpack.config.js：
module: {
rules:[
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader'],
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader',less-loader','postcss-loader'],
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader','sass-loader','postcss-loader'],
},
]
为了更好的兼容浏览器 ，在package.json 添加browserslist ，其api来源于can i use
package.json:
"browserslist": [
"last 8 version"
]
### 6.2 若要支持css Grid布局
npm install autoprefixer@latest cross-env --save-dev
###6.3 图片静态资源 file-loader url-loader ,，但url-loader的功能更强，带有file-loader的功能，一般使安装url-loader即可
npm install file-loader --save-dev
webpack.config.js：
module: {
rules:[
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: 'static/images/[name].[ext]',
publicPath:'/',
},
},
],
},
]
npm install url-loader --save-dev
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 1024, //图片<1024,使用base64，>1024使用拷贝图片资源的方式 拷贝到指定文件夹
name: 'static/images/[name].[ext]',// 图片＞1024 ,使用file-loader的options
publicPath:'/',// 图片>1024使用file-loader的options
},
},
],
},
###6.4 copy-webpack-plugin <img>标签引入图片一般使采用copywebpackplugin拷贝图片资源
npm install copy-webpack-plugin --save-dev
webpack.config.js:
const CopyPlugin = require('copy-webpack-plugin');
new CopyPlugin([
{ from: path.resolve(process.cwd(),'src/static/'), to: path.resolve(process.cwd(),'dist/static')},
]),
src>static>3.jpeg
public>index.html <img src="/static/3.jpeg" alt="采用copywebpackplugin">
###7. babel
npm install -D babel-loader @babel/core @babel/preset-env
webpack.config.js:
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
### 7.1 npm install -g bower 引入bower组件库，比如引入jquery，根目录下会自动生成bower_components文件夹，index.html 引入jquery 项目中即可使用jquery
npm install -g bower
bower install jquery -->bower_components>jquery
index.html：
<script src="bower_components/jquery/dist/jquery.min.js"></script>
###7.2 webpack-merge
var merge = require('webpack-merge');
webpack.config.js:分解成以下文件
webpack.config.prod.js
webpack.config.dev.js
webpack.config.base.js
var webpackConfig=merge(baseConfig,devConfig,prodConfig)
package.json:
"build": "webpack --config script/webpack.config.prod.js",
"dev": "webpack-dev-server --hot --config script/webpack.config.dev.js --open chrome ",