安装
yarn add webpack webpack-cli -D
npx webpack index.js
图片
file-loader
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
module: { rules: [ { test: /\.(jpg|png|gif)$/, use: { loader: 'file-loader', options: { name: '[name]_[hash].[ext]', // 占位符 outputPath: 'images/' } } } ] },
把图片打包成64位字符串
url-loader
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
module: { rules: [ { test: /\.(jpg|png|gif)$/, use: { loader: 'url-loader', options: { name: '[name]_[hash].[ext]', // 占位符 outputPath: 'images/', limit: 20240 } } } ] },
样式
style-loader
在HTML中创建一个style标签,标签内容是css
css-loader
允许JS中import一个css文件,把css文件当成一个模块
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
sass-loader / node-sass
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
postcss-loader
浏览器前缀
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
{ test: /\.scss$/, use: [ 'style-loader', { loader:'css-loader', options: { importLoaders: 2 } } 'sass-loader', 'postcss-loader' ] }
配置postcss.config.js
安装 autoprefixer
module.exports = { plugins: [ require('autoprefixer') ] }
模块化css
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
{ loader:'css-loader', options: { importLoaders: 2, modules: true } },
在js中引入模块css
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
import style from './assets/styles/global.scss' img.classList.add(style.avatar)
字体文件
file-loader
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
{ test: /\.(eot|svg|ttf|woff)/, use: 'file-loader' },
HTML模板
html-webpack-plugin
会在打包结束后生成一个HTML文件,并把打包生成的JS自动引入到HTML文件中
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
const HtmlWebpackPlugin = require('html-webpack-plugin') plugins: [new HtmlWebpackPlugin({ template: './index.html' })],
删除打包文件dist
clean-webpack-plugin
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
const CleanWebpackPlugin = require('clean-webpack-plugin') new CleanWebpackPlugin()
devtool
打包生成的代码出错的时候,可以通过source map 定位错误在哪一行
devtool: 'none' // source-map // cheap-module-eval-source-map 开发环境 // cheap-module-source-map // 线上环境
devServer
webpack-dev-server
启动服务器
devServer: { contentBase:'/dist' // 在哪个文件启动服务器 },
package.json
"start": "webpack-dev-server",
配置跨域
proxy: { "/api": "http://localhost:3000" }
热模块替换(HMR)
// devServer devServer: { contentBase:'/dist', hot: true, hotOnly: true }, // plugins plugins: [ new webpack.HotModuleReplacementPlugin() ],
if (module.hot) { module.hot.accept() }
Babel
babel-loader @babel/core
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
@babel/preset-env / @babel/plugin-transform-runtime / @babel/runtime / @babel/runtime-corejs2
{ "presets": [ ["@babel/preset-env", ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": 2, "helpers": true, "regenerator": true, "useESModules": false } ] ] }
React
@babel/preset-react
{ "presets": ["@babel/preset-react"] }
完整配置
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
const { resolve } = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const CleanWebpackPlugin = require('clean-webpack-plugin') module.exports = { mode: 'development', entry: './src/index.js', output: { filename:'[name]-[hash].js', path: resolve(__dirname, 'dist') }, devtool:'cheap-module-eval-source-map', devServer: { contentBase:resolve(__dirname, 'dist'), hot: true, hotOnly: true }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: resolve(__dirname, 'public/index.html') }), new webpack.HotModuleReplacementPlugin() ], module: { rules: [ { test: /\.css$/, use: [ 'style-loader', { loader:'css-loader', options: { importLoader: 2 } }, 'postcss-loader' ] }, { test: /\.scss$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 2 } }, 'sass-loader', 'postcss-loader' ] }, { test: /\.(png|jpg|gif)$/, use: 'url-loader' }, { test: /\.(wof)$/, use: 'file-loader' }, { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' } ] } }