初始化
mkdir webpack-demo ->新建文件夹
cd webpack-demo ->进入文件夹- 第一步 npm init -y -> 初始化项目(生成package.js)
- 第二步 npm install webpack webpack-cli --save-dev ->(下载webpack与webpack-cil)
加载资源
- 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 -> (dev-server会生成一个虚拟服务器)
进入监视模式: 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({ // 压缩JScache: 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转换成es5presets: ['@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转换成es5presets: ['@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({ // 创建新的htmltemplate: './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(),