webpack默认只能处理js、json文件 其他文件需要使用loader解决
如 less文件
import {sum} from "./module1.js"import {sub} from "./module2.js"import module from "./module3.js"import json from "../json/fruit.json"import "./css/index.less"console.log(sum(1,2))console.log(sub(6,6));console.log(module.mul(3,3))console.log(module.divde(9,3))console.dir(json)//webpack只管翻译es6模块的语法变成浏览器认识的 ，但是他不会转换新语法如箭头函数setTimeout(()=>{console.log("进入了")})
如上语法引入index.less文件 webpack解析不了 使用loader解决
1、less-loader
npm install -D less less-loader css-loader style-loader
- less-loader webpack 将 Less 编译为 CSS 的 loader。
- css-loadercss-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。
- style-loader 把 CSS 插入到 html中。
- less-loader 依赖less
```javascript
const path = require(“path”);
module.exports = {
entry: “./js/index.js”, //入口
output: {
path: path.resolve(__dirname, “dist”),
filename: “bundle.js”,
}, //输出
module: {
rules: [
{
}, ], }, //配置loader plugins: [], //配置plugin mode: “development”, };test: /\.less$/,use: ["style-loader","css-loader",// 将 less 文件编译成 css 文件 // 需要下载 less-loader 和 less 'less-loader'"less-loader",],
<a name="iqs5l"></a>
# ESLint
js语法检查
```javascript
npm install eslint eslint-loader --save-dev
在webpack rules中添加
{
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
// eslint options (if necessary)
}
}
在package设置配置项 （需要删除注释才能生效）
"eslintConfig": {
"parserOptions": {
"ecmaVersion": 6, // 支持es6
"sourceType": "module" // 使用es6模块化
},
"env": { // 设置环境
"browser": true, // 支持浏览器环境： 能够使用window上的全局变量
"node": true // 支持服务器环境: 能够使用node上global的全局变量
},
"globals": { // 声明使用的全局变量, 这样即使没有定义也不会报错了
"$": "readonly" // $ 只读变量
},
"rules": { // eslint检查的规则 0 忽略 1 警告 2 错误
"no-console": 0, // 不检查console
"eqeqeq": 2, // 用==而不用===就报错
"no-alert": 2 // 不能使用alert
},
"extends": "eslint:recommended" // 使用eslint推荐的默认规则 https://cn.eslint.org/docs/rules/
}
babel-loader
ES6语法转换
npm install -D babel-loader @babel/core @babel/preset-env
在webpack rules中添加
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
注意：Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。举个栗子，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。
npm install @babel/polyfill -D
在入口文件中引入
import "@babel/polyfill"
core-js
polyfill 不能按需引入 使用core-js 解决
const path = require("path");
module.exports = {
entry: "./js/index.js", //入口
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
}, //输出
module: {
rules: [
{
test: /\.less$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "less-loader",
options: {
lessOptions: {
strictMath: true,
},
},
},
],
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
// eslint options (if necessary)
},
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
useBuiltIns: "usage", // 按需引入需要使用polyfill
corejs: { version: 3 }, // 解决warn
targets: {
// 指定兼容性处理哪些浏览器
chrome: "58",
ie: "9",
},
},
],
],
cacheDirectory: true, // 开启babel缓存
},
},
},
],
}, //配置loader
plugins: [], //配置plugin
mode: "development",
};
file-loader url-loader
- 概述：图片文件webpack不能解析，需要借助loader编译解析
- 添加2张图片:
- 小图, 小于8kb: src/images/vue.png
- 大图, 大于8kb: src/images/react.jpg
- 在less文件中通过背景图的方式引入图片
- 安装loader
- npm install file-loader url-loader —save-dev
- 补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。
配置loader
{ test: /\.(png|jpg|gif)$/, use: { loader: 'url-loader', options: { limit: 8192, // 8kb --> 8kb以下的图片会base64处理 outputPath: 'images', // 决定文件本地输出路径 publicPath: '../build/images', // 决定图片的url路径 name: '[hash:8].[ext]' // 修改文件名称 [hash:8] hash值取8位 [ext] 文件扩展名 } } },html-webpack-plugin
概述：html文件webpack不能解析，需要借助插件编译解析
添加html文件
- src/index.html
- 注意不要在html中引入任何css和js文件
- 安装插件Plugins
- npm install html-webpack-plugin —save-dev
- 在webpack.config.js中引入插件（插件都需要手动引入，而loader会自动加载）
- const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
- 配置插件Plugins
new HtmlWebpackPlugin({ template: "./src/index.html", // 以当前文件为模板创建新的HtML(1. 结构和原来一样 2. 会自动引入打包的资源) }),
html-loader
- 概述：html中的图片url-loader没法处理，它只能处理js中引入的图片 / 样式中图片，不能处理html中img标签，需要引入其他html-loader处理。
- 添加图片
- 在src/index.html添加两个img标签
- 安装loader
- npm install html-loader —save-dev
配置loader
{ test: /\.(html)$/, use: { loader: 'html-loader' } }运行指令：webpack
其他资源
- 概述：其他资源webpack不能解析，需要借助loader编译解析
- 添加字体文件
- src/media/iconfont.eot
- src/media/iconfont.svg
- src/media/iconfont.ttf
- src/media/iconfont.woff
- src/media/iconfont.woff2
- 修改样式 ``` @font-face { font-family: ‘iconfont’; src: url(‘../media/iconfont.eot’); src: url(‘../media/iconfont.eot?#iefix’) format(‘embedded-opentype’), url(‘../media/iconfont.woff2’) format(‘woff2’), url(‘../media/iconfont.woff’) format(‘woff’), url(‘../media/iconfont.ttf’) format(‘truetype’), url(‘../media/iconfont.svg#iconfont’) format(‘svg’); }
.iconfont { font-family: “iconfont” !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
- 修改html，添加字体
- 配置loader
{ test: /.(eot|svg|woff|woff2|ttf|mp3|mp4|avi)$/, // 处理其他资源 loader: ‘file-loader’, options: { outputPath: ‘media’, name: ‘[hash:8].[ext]’ } }
- 运行指令：webpack
<a name="nWdKL"></a>
# 自动编译打包运行
- 安装loader
- npm install webpack-dev-server --save-dev
- 详细配置见官网：指南 -> 开发环境 -> 使用webpack-dev-server
- 修改webpack配置对象（注意不是loader中）
devServer: { open: true, // 自动打开浏览器 compress: true, // 启动gzip压缩 port: 3000, // 端口号 }
- 修改url-loader部分配置
- 因为构建工具以build为根目录，不用再找build了
- `publicPath: '../build/images/'` --> `publicPath: 'images/'`
- 修改package.json中scripts指令
- "start": "webpack-dev-server",
- 运行指令：npm run start
- 注意`webpack-dev-server`指令才能启动devServer配置，然后配置到package.json中才行
<a name="oaBF7"></a>
# 热模替换功能
- 概述：热模块替换（HMR）是webpack提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而无需完全刷新（只更新变化的模块，不变的模块不更新）。
- 详细配置见官网：指南 -> 模块热替换
- 修改devServer配置
devServer: { contentBase: resolve(__dirname, ‘build’), // 运行项目的目录 open: true, // 自动打开浏览器 compress: true, // 启动gzip压缩 port: 3000, // 端口号 hot: true // 开启热模替换功能 HMR }
- 问题：html文件无法自动更新了，需要增加一个入口
entry: [‘./src/js/app.js’,’./src/index.html’]
<a name="QSCcS"></a>
# devtool
- 概述： 一种将压缩/编译文件中的代码映射回源文件中的原始位置的技术，让我们调试代码不在困难
- 详细配置见官网：配置 -> devtool
- 介绍
- cheap 只保留行, 编译速度快
- eval webpack生成的代码（每个模块彼此分开，并使用模块名称进行注释）, 编译速度快
- inline 以base64方式将source-map嵌入到代码中，缺点造成编译后代码体积很大
- 推荐使用：
- 开发环境： cheap-module-eval-source-map
- 生产环境： cheap-module-source-map
> 以上就是webpack开发环境的配置，可以在内存中自动打包所有类型文件并有自动编译运行、热更新等功能。
<a name="xOtCT"></a>
# 准备生产环境
- 创建文件夹config，将webpack.config.js复制两份
- ./config/webpack.dev.js
- ./config/webpack.prod.js
- 修改webpack.prod.js配置，删除webpack-dev-server配置
- // / 代表根路径(等价于这个：http://localhost:5000/)，以后项目上线所有路径都以当前网址为根路径出发<br />module.exports = {<br />output: {<br />path: resolve(__dirname, '../build'), // 文件输出目录<br />filename: './js/built.js', // 文件输出名称<br />publicPath: '/' // 所有输出资源在引入时的公共路径，若loader中也指定了publicPath，会以loader的为准。<br />},<br />module: {<br />rules: [<br />{<br />test: /.(png|jpg|gif)$/,<br />use: {<br />loader: 'url-loader',<br />options: {<br />limit: 8192,<br />outputPath: 'images',<br />publicPath: '/images', // 重写publicPath，需要在路径前面加上 /<br />name: '[hash:8].[ext]'<br />}<br />}<br />}, <br />]<br />},<br />mode: 'production', //修改为生产环境<br />devtool: 'cheap-module-source-map' // 修改为生产环境的错误提示<br />// 删除devServer<br />}
- 修改package.json的指令
- “start”: “webpack-dev-server —config ./config/webpack.dev.js”
- “dev”: “webpack-dev-server —config ./config/webpack.dev.js”
- “build”: “webpack —config ./config/webpack.prod.js”
- 开发环境指令
- npm start
- npm run dev
- 生产环境指令
- npm run build
- 注意: 生产环境代码需要部署到服务器上才能运行 （serve这个库能帮助我们快速搭建一个静态资源服务器）
- 概述：每次打包生成了文件，都需要手动删除，引入插件帮助我们自动删除上一次的文件
- 安装插件
- npm install clean-webpack-plugin —save-dev
- 引入插件
- const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’); // 注意要解构赋值！！！
- 配置插件
- new CleanWebpackPlugin() // 自动清除output.path目录下的文件
- 运行指令：npm run build
提取css成单独文件
- 安装插件
- npm install mini-css-extract-plugin —save-dev
- 引入插件
- const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);
配置loader
{ test: /\.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', ] }配置插件
new MiniCssExtractPlugin({ filename: "css/[name].css", })运行指令
- npm run build
- serve -s build
添加css兼容
- 安装loader
- npm install postcss-loader postcss-flexbugs-fixes postcss-preset-env postcss-normalize autoprefixer —save-dev
配置loader
{ test: /\.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', { loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), require('postcss-preset-env')({ autoprefixer: { flexbox: 'no-2009', }, stage: 3, }), require('postcss-normalize')(), ], sourceMap: true, }, }, 'less-loader', ] }添加配置文件: .browserslistrc
last 1 version > 1% IE 10 # sorry运行指令：
- npm run build
- serve -s build
压缩css
- 安装插件
- npm install optimize-css-assets-webpack-plugin —save-dev
- 引入插件
- const OptimizeCssAssetsPlugin = require(‘optimize-css-assets-webpack-plugin’);
配置插件
new OptimizeCssAssetsPlugin({ cssProcessorPluginOptions: { preset: ['default', { discardComments: { removeAll: true } }], }, cssProcessorOptions: { // 解决没有source map问题 map: { inline: false, annotation: true, } } })运行指令：
- npm run build
- serve -s build
压缩html
修改插件配置
new HtmlWebpackPlugin({ template: './src/index.html', minify: { removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true, keepClosingSlash: true, minifyJS: true, minifyCSS: true, minifyURLs: true, } })运行指令：
- npm run build
- serve -s dist
以上就是webpack生产环境的配置，可以生成打包后的文件。
1.webpack3配置教程.md2.webpack4配置教程.mdwebpack总结.mdwebpack.dev.jswebpack.prod.js
若有收获，就点个赞吧
0 人点赞
