webpack4流程笔记

PS：其实学习webpack4最快的方法就是跟着官网敲一遍，博主就是跟着敲了一遍之后才真正开始入门webpack4的！！

初始化

mkdir webpack-demo
cd webpack-demo

• 第一步 npm init -y
• 第二步 npm install webpack webpack-cli --save-dev

加载资源

• CSS: npm install --save-dev style-loader css-loader
• 图片: npm install --save-dev file-loader
• 数据: npm install --save-dev csv-loader xml-loader
• ES6解析: npm install -D babel-loader @babel/core @babel/preset-env
  第三步 npm i -D style-loader css-loader file-loader csv-loader xml-loader babel-loader @babel/core @babel/preset-env

目前为止学习的所有插件:

@babel/core @babel/preset-env autoprefixer babel-loader css-loader file-loader html-webpack-plugin mini-css-extract-plugin postcss-loader style-loader webpack webpack-cli webpack-dev-server

下载本地服务器

• npm i webpack-dev-server -D

进入监视模式: webpack --watch

• 进入监视模式之后不需要再次输入 npm run build 保存文件自动刷新页面

server的命令

• 在浏览器打开: webpack-dev-server --open
  改变端口号: webpack-dev-server --open --port 3000
  直接打开html: webpack-dev-server --open --port 8080 --contentBase src

server的配置

devServer: { // 开发服务器的配置
port: 3000, // 端口号
progress: true, //
contentBase: ‘./dist‘, // 打开的文件路径
open: true // 是否打开
},

分离css的插件

• 插件: npm i -D html-webpack-plugin
• new MiniCssExtractPlugin({
  filename: ‘main.css‘
  })
• use里配置: MiniCssExtractPlugin.loader

自动添加CSS3前缀的插件

• 插件: npm i -D postcss-loader autoprefixer
• 然后配置一个 postcss.config.js 的文件
• module.exports = {
  plugins: [require(‘autoprefixer‘)]
  }

压缩CSS的插件

• 插件: npm -D optimize-css-assets-webpack-plugin;
• const optimizeCss = require(‘optimize-css-assets-webpack-plugin‘);

• optimization: { // 优化项
  minimizer: [
  new optimizeCss()
  ]
  },
  

  　　

压缩JS的插件

• 插件: npm -D uglifyjs-webpack-plugin;
• const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘);

• new UglifyJsPlugin({ // 压缩JS
  cache: true, // 是否缓存
  parallel: true, // 是否压缩多个
  sourceMap: true // es6的源码映射
  }),
  

  　　

解析ES6的插件

• 插件: npm install -D babel-loader @babel/core @babel/preset-env
• 插件2(解析更高级的语法ES7): npm i -D @babel/plugin-proposal-class-properties
• 插件3: npm i -D @babel/plugin-transform-runtime 依赖: @babel/runtime -save

• {
  test: /.js$/,
  use: {
  loader: ‘babel-loader‘,
  options: { // babel-loader 把es6转换成es5
  presets: [
  ‘@babel/preset-env‘
  ]
  }
  }
  },
  

  　　

  
  babel-loader: 解析es6的loader
  @babel/core: 模块
  @babel/preset-env: 把高级语法转换成es5的插件

JS代码效验插件

插件: npm i eslint eslint-loader -D

解析less

{
test: /.less$/,
use: [
MiniCssExtractPlugin.loader,
‘css-loader‘,
‘postcss-loader‘,
‘less-loader‘
]
}

设置HtmlWebpackPlugin

• 插件: npm install --save-dev html-webpack-plugin

• new HtmlWebpackPlugin({
  template: ‘./src/index.html‘,
  filename: ‘index.html‘,
  minify: {
  removeAttributeQuotes: true, // 删除index里的双引号
  collapseWhitespace: true, // 折叠空行 变成一行
  },
  // hash: true // 哈希戳
  }),
  

  　　

webpack.config.js配置

const path = require(‘path‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘); // 分离css的插件


module.exports = {
mode: ‘development‘, // 模式 默认两种 production-生产 development-开发
entry: { // 入口
index: ‘./src/index.js‘
},
devtool: ‘inline-source-map‘, // 报错源
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
‘css-loader‘,
‘postcss-loader‘
]
},
{
test: /\.js$/, // normal 普通的
use: {
loader: ‘babel-loader‘,
options: { // babel-loader 把es6转换成es5
presets: [‘@babel/preset-env‘]
}
},
include: path.resolve(__dirname, ‘src‘),
exclude: /node_modules/
},
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: ‘file-loader‘,
options: {
outputPath: ‘../imgs/‘
}
}
},
{ test: /\.(woff|woff2|eot|ttf|otf)$/, use: [‘file-loader‘] }
]
},
plugins: [
new HtmlWebpackPlugin({ // 创建新的html
template: ‘./src/index.html‘,
filename: ‘index.html‘
}),
new MiniCssExtractPlugin({
filename: ‘./css/main.css‘
})
],
devServer: { // 打开浏览器
contentBase: ‘./dist‘,
open: true,
port: 3000,
inline: true
},
output: { // 出口
filename: ‘bundle.js‘,
path: path.resolve(__dirname, ‘dist‘)
}
}

package.json scripts配置

"build": "webpack",
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
"server": "node server.js"

设置HtmlWebpackPlugin

• 插件: npm install --save-dev html-webpack-plugin
• 蓝文件夹: 

  const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
  plugins: [
  new HtmlWebpackPlugin({
  title: ‘Output Management‘
  })
  ],
  

  　　

清理/dist文件夹

npm install --save-dev clean-webpack-plugin
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin‘);
new CleanWebpackPlugin(),

webpack4流程笔记

原文：https://www.cnblogs.com/lijieqiqi/p/qiqipak.html