1、webpack
1.webpack是什么
简介:webpack是一个JavaScript应用程序的静态模块打包器。
2.webpack有什么作用
模块化打包:
webpack会将项目的资源文件当成一个一个模块,模块之间会有依赖关系,
webpack将会对这些有依赖关系的文件进行处理,让浏览器能够识别,
最后将应用程序需要的每个模块打包成一个或者多个bundle
2、webpack环境配置和简单打包
1、安装node
node官网:https://nodejs.org/zh-cn/
2. 创建一个文件 npm init 生成package.json文件
npm init
{
"name": "my-webpack",
"version": "1.0.0",
"description": "\"项目描述\"",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
3.安装webpack
本地安装(为每一个项目安装一个webpack版本)
npm install --save-dev webpack webpack-cli
全局安装(为所有的项目安装同一个webpack版本)
npm install --global webpack webpack-cli
4.打包
默认entry 入口:src/index.js
默认output 出口:dist/main.js
备注:现在创建的这个项目 没有src/index.js需要自己创建
5. 打包模式
在package.json输出打包命令
webpack --mode development(开发环境)
webpack --mode production(生成环境)
{
"name": "my-webpack",
"version": "1.0.0",
"description": "\"项目描述\"",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
}
}
6.npm run dev 或 npm run build 会生成dist/main.js打包后的文件.
3、使用webpack.config.js修改打包文件信息
默认的打包文件信息;
入口:src/index.js
出口:dist/main.js
当没有webpack.config.js文件存在时,将会使用默认的配置打包信息,
现在手动创建webpack.config.js文件修改打包信息。
const path = require('path');
module.exports = {
/**
* entry:加载的入口文件 不存在需要自己创建
*
(1)path指文件打包后的存放路径
(2)path.resolve()方法将路径或路径片段的序列处理成绝对路径
(3)__dirname 表示当前文件所在的目录的绝对路径
(4)filename是打包后文件的名称
*
* */
entry: './ldd/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: "bundle.js"
}
}
4、 入口entry和出口output进阶用法
1、单文件入口
const path = require('path');
module.exports = {
entry: './ldd/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: "bundle.js"
}
}
2.多文件入口
const path = require('path');
module.exports = {
entry: ['./ldd/index.js', './ldd/index1.js'],
output: {
path: path.resolve(__dirname, 'build'),
filename: "bundle.js"
}
}
1、2对应单出口
output: {
path: path.resolve(__dirname, 'build'),
filename: "bundle.js"
}
3.多入口:
const path = require('path');
module.exports = {
entry: {
lddOne: "./ldd/lddOne/index.js",
lddTwo: "./ldd/lddTwo/index.js"
},
output: {
path: path.resolve(__dirname, 'build'),
//[name] 会在build文件中 生成lddOne.js lddTwo.jd
filename: "[name].js"
}
}
多出口
output: {
path: path.resolve(__dirname, 'build'),
//[name] 会在build文件中 生成lddOne.js lddTwo.jd
filename: "[name].js"
}
5、webpack-dev-server
1.webpack-dev-server
webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。
webpack-dev-server 主要提供两个功能:
(1)为静态文件提供服务
(2)自动刷新和热替换(HMR)
使用:
安装npm install --save-dev webpack-dev-server
配置webpack.config.js
const path = require('path');
module.exports = {
entry: {
app: "./ldd/index.js"
},
output: {
path: path.resolve(__dirname, 'build'),
//[name] 会在build文件中 生成lddOne.js lddTwo.jd
filename: "[name].js"
},
devServer: {
contentBase: './build', //设置服务器访问的基本目录
host: 'localhost', //服务器ip地址
port: 8080, //服务器端口号
open: true //自动打开页面
}
}
配置package.json文件
"start": "webpack-dev-server --mode development"
{
"name": "my-webpack",
"version": "1.0.0",
"description": "\"项目描述\"",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.3"
}
}
6、加载css
1.loader
loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。
2.安装加载css文件的loader
安装style-loader和css-loader
npm install --save-dev style-loader css-loader
3.配置loader
在webpack.config.js中配置module中的rules
在 webpack 的配置中 loader 有两个目标:
1. test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2. use 属性,表示进行转换时,应该使用哪个 loader。
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
----总配置文件预览
const path = require('path');
module.exports = {
entry: {
app: "./ldd/index.js"
},
output: {
path: path.resolve(__dirname, 'build'),
//[name] 会在build文件中 生成lddOne.js lddTwo.jd
filename: "[name].js"
},
devServer: {
contentBase: './build', //设置服务器访问的基本目录
host: 'localhost', //服务器ip地址
port: 8080, //服务器端口号
open: true //自动打开页面
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}
7、编译less
1.less
css扩展语句。
2.安装loader
安装less-loader 和 less
npm install --save-dev less-loader less
3.配置loader
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}
8、编译sass
1.sass
css扩展语言。
2.安装loader
安装sass-loader和node-sass
npm install --save-dev sass-loader node-sass
3.配置loader
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
9、图片处理
1.file-loader
npm install --save-dev file-loader
2.编辑webpack.config.js
module: {
rules: [
{
test: /\.(jpg|png|gif|jpeg)$/,
use: "file-loader"
}
]
}
10、字体文件处理
1.file-loader
npm install --save-dev file-loader
2.编辑webpack.config.js
module: {
rules: [
{
test: /\.(ttf|woff|woff2|eot|svg)$/,
use: "file-loader"
}
]
}
11、引入 Jquery第三方JS库
方式1
----------------------------------------
1.下载jquery.js离线文件
jquery.min.js
2.编辑webpack.config.js文件
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
app: "./ldd/index.js"
},
output: {
path: path.resolve(__dirname, 'build'),
//[name] 会在build文件中 生成lddOne.js lddTwo.jd
filename: "[name].js"
},
devServer: {
contentBase: './build', //设置服务器访问的基本目录
host: 'localhost', //服务器ip地址
port: 8080, //服务器端口号
open: true //自动打开页面
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
//引入Jquery
resolve: {
alias: {
jQuery: path.resolve(__dirname, "ldd/jquery.min.js")
}
},
plugins: [
new webpack.ProvidePlugin({
$: "jQuery"
})
]
}
//直接就$使用
import './index.css'
console.log("新建src/index.js 打包入门文件没有需要自己创建");
console.log($("#ldd"));
方式2
-------------------------------------------------
npm install jquery --save-dev
import $ from 'jquery'
12、bable-loader 编译ES6
1.babel
目前,ES6(ES2015)这样的语法已经得到很大规模的应用,它具有更加简洁、功能更加强大的特点,实际项目中很可能会使用采用了ES6语法的模块,但浏览器对于ES6语法的支持并不完善。为了实现兼容,就需要使用转换工具对ES6语法转换为ES5语法,babel就是最常用的一个工具
2.babel转化语法所需依赖项:
babel-loader: 负责 es6 语法转化
babel-core: babel核心包
babel-preset-env:告诉babel使用哪种转码规则进行文件处理
3.安装依赖
npm install babel-loader @babel/core @babel/preset-env --save-dev
4.配置webpack.config.js文件
module: {
rules: [
{
test: /\.js$/,
//排除node_modules中的js文件,不将其转码
exclude: /node_modules/,
use: "babel-loader"
}
]
}
5.新建.babelrc文件
{
"presets": ["@babel/preset-env"]
}
6.方式2【不创建.babelrc文件 直接在webpack.config.js配置】
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
13、html-webpack-plugin
1.html-webpack-plugin
HtmlWebpackPlugin会自动为你生成一个HTML文件,根据指定的index.html模板生成对应的 html 文件。
2.安装插件
npm install html-webpack-plugin --save-dev
3.配置webpack.config.js文件
plugins: [
new HtmlWebpackPlugin({
template: "./ldd/index.html",
filename: 'index.html',
minify: {
minimize: true, //是否打包为最小值
removeAttributeQuotes: true, //去除引号
removeComments: true, //去除注释
collapseWhitespace: true, //去除空格
minifyCSS: true, //压缩html内的样式
minifyJS: true, //压缩html内的JS
removeEmptyElements: true //清理内容为空的元素
},
hash: true //引入产出资源时加上哈希值避免缓存
})
]
完整文件:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: "./ldd/index.js"
},
output: {
path: path.resolve(__dirname, 'build'),
//[name] 会在build文件中 生成app.js
filename: "[name].js"
},
devServer: {
contentBase: './build', //设置服务器访问的基本目录
host: 'localhost', //服务器ip地址
port: 8080, //服务器端口号
open: true //自动打开页面
},
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./ldd/index.html",
filename: 'index.html',
minify: {
minimize: true, //是否打包为最小值
removeAttributeQuotes: true, //去除引号
removeComments: true, //去除注释
collapseWhitespace: true, //去除空格
minifyCSS: true, //压缩html内的样式
minifyJS: true, //压缩html内的JS
removeEmptyElements: true //清理内容为空的元素
},
hash: true //引入产出资源时加上哈希值避免缓存
})
]
}
14、提取分离CSS
将入口文件中引入css文件分离打包出来
方式1:
使用ExtractTextPlugin插件(旧版)
npm install --save-dev extract-text-webpack-plugin@next
编辑webpack.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
//fallback:编译后用什么loader来提取css文件
fallback: "style-loader",
use: "css-loader"
})
}]
},
new ExtractTextPlugin("./css/index.css")
完整配置文件:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
app: "./ldd/index.js"
},
output: {
path: path.resolve(__dirname, 'build'),
//[name] 会在build文件中 生成lddOne.js lddTwo.jd
filename: "[name].js"
},
devServer: {
contentBase: './build', //设置服务器访问的基本目录
host: 'localhost', //服务器ip地址
port: 8080, //服务器端口号
open: true //自动打开页面
},
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
//fallback:编译后用什么loader来提取css文件
fallback: "style-loader",
use: "css-loader"
})
}]
},
plugins: [
new HtmlWebpackPlugin({
template: "./ldd/index.html",
filename: 'index.html',
minify: {
minimize: true, //是否打包为最小值
removeAttributeQuotes: true, //去除引号
removeComments: true, //去除注释
collapseWhitespace: true, //去除空格
minifyCSS: true, //压缩html内的样式
minifyJS: true, //压缩html内的JS
removeEmptyElements: true //清理内容为空的元素
},
hash: true //引入产出资源时加上哈希值避免缓存
}),
new ExtractTextPlugin("./css/index.css")
]
}
将入口文件中引入css文件分离打包出来
方式2:
----------------------------------------------
使用mini-css-extract-plugin插件
1.安装
npm install --save-dev mini-css-extract-plugin
2.配置webpack.config.js文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module: {
rules: [{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}]
}
new MiniCssExtractPlugin({
filename: "./css/index.css"
})
完成配置文件:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: {
app: "./ldd/index.js"
},
output: {
path: path.resolve(__dirname, 'build'),
filename: "[name].js"
},
devServer: {
contentBase: './build', //设置服务器访问的基本目录
host: 'localhost', //服务器ip地址
port: 8080, //服务器端口号
open: true //自动打开页面
},
module: {
rules: [{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}]
},
plugins: [
new HtmlWebpackPlugin({
template: "./ldd/index.html",
filename: 'index.html',
minify: {
minimize: true, //是否打包为最小值
removeAttributeQuotes: true, //去除引号
removeComments: true, //去除注释
collapseWhitespace: true, //去除空格
minifyCSS: true, //压缩html内的样式
minifyJS: true, //压缩html内的JS
removeEmptyElements: true //清理内容为空的元素
},
hash: true //引入产出资源时加上哈希值避免缓存
}),
new MiniCssExtractPlugin({
filename: "./css/index.css"
})
]
}
15、压缩优化css结构
1.使用optimize-css-assets-webpack-plugin插件
安装:
npm install --save-dev optimize-css-assets-webpack-plugin
2.编辑webpack.config.js
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
//压缩优化css结构
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css$/g, //正则表达式,用于匹配需要优化或者压缩的资源名。默认值是 /\.css$/g
cssProcessor: require("cssnano"), //用于压缩和优化CSS 的处理器,默认是 cssnano.
cssProcessorOptions: { //传递给cssProcessor的插件选项,默认为{}
preset: ['default',
{ //discardComments:去除注释
discardComments: { removeAll: true }
}
]
},
canPrint: true //表示插件能够在console中打印信息,默认值是true
})
完整配置文件:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
module.exports = {
entry: {
app: "./ldd/index.js"
},
output: {
path: path.resolve(__dirname, 'build'),
filename: "[name].js"
},
devServer: {
contentBase: './build', //设置服务器访问的基本目录
host: 'localhost', //服务器ip地址
port: 8080, //服务器端口号
open: true //自动打开页面
},
module: {
rules: [{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}]
},
plugins: [
new HtmlWebpackPlugin({
template: "./ldd/index.html",
filename: 'index.html',
minify: {
minimize: true, //是否打包为最小值
removeAttributeQuotes: true, //去除引号
removeComments: true, //去除注释
collapseWhitespace: true, //去除空格
minifyCSS: true, //压缩html内的样式
minifyJS: true, //压缩html内的JS
removeEmptyElements: true //清理内容为空的元素
},
hash: true //引入产出资源时加上哈希值避免缓存
}),
new MiniCssExtractPlugin({
filename: "./css/index.css"
}),
//压缩优化css结构
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css$/g, //正则表达式,用于匹配需要优化或者压缩的资源名。默认值是 /\.css$/g
cssProcessor: require("cssnano"), //用于压缩和优化CSS 的处理器,默认是 cssnano.
cssProcessorOptions: { //传递给cssProcessor的插件选项,默认为{}
preset: ['default',
{ //discardComments:去除注释
discardComments: { removeAll: true }
}
]
},
canPrint: true //表示插件能够在console中打印信息,默认值是true
})
]
}
16、webpack拷贝静态文件
1.安装插件
npm install --save-dev copy-webpack-plugin
2.编辑webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin')
//copy静态文件到打包后的文件
new CopyWebpackPlugin([{
from: __dirname + '/static/',
to: __dirname + '/build/static/'
}])
17、clean-webpack-plugin使用
1.作用:
当我们修改带hash的文件并进行打包时,每打包一次就会生成一个新的文件,而旧的文件并没有删除。
为了解决这种情况,我们可以使用clean-webpack-plugin在打包之前将文件先清除,之后再打包出最新的文件
2.安装
npm install --save-dev clean-webpack-plugin
3.编辑webpack.config.js文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
output: {
path: path.resolve(__dirname, 'build'),
//输出文件加上hash
filename: "[name][hash].js"
},
//删除打包之前的文件重新打包
new CleanWebpackPlugin()
完整配置:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: {
app: "./ldd/index.js"
},
output: {
path: path.resolve(__dirname, 'build'),
filename: "[name][hash].js"
},
devServer: {
contentBase: './build', //设置服务器访问的基本目录
host: 'localhost', //服务器ip地址
port: 8080, //服务器端口号
open: true //自动打开页面
},
module: {
rules: [{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}]
},
plugins: [
new HtmlWebpackPlugin({
template: "./ldd/index.html",
filename: 'index.html',
minify: {
minimize: true, //是否打包为最小值
removeAttributeQuotes: true, //去除引号
removeComments: true, //去除注释
collapseWhitespace: true, //去除空格
minifyCSS: true, //压缩html内的样式
minifyJS: true, //压缩html内的JS
removeEmptyElements: true //清理内容为空的元素
},
hash: true //引入产出资源时加上哈希值避免缓存
}),
new MiniCssExtractPlugin({
filename: "./css/index.css"
}),
//压缩优化css结构
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css$/g, //正则表达式,用于匹配需要优化或者压缩的资源名。默认值是 /\.css$/g
cssProcessor: require("cssnano"), //用于压缩和优化CSS 的处理器,默认是 cssnano.
cssProcessorOptions: { //传递给cssProcessor的插件选项,默认为{}
preset: ['default',
{ //discardComments:去除注释
discardComments: { removeAll: true }
}
]
},
canPrint: true //表示插件能够在console中打印信息,默认值是true
}),
//copy静态文件到打包后的文件
new CopyWebpackPlugin([{
from: __dirname + '/static/',
to: __dirname + '/build/static/'
}]),
//删除打包之前的文件重新打包
new CleanWebpackPlugin()
]
}
18、模块热部署
1.模块热部署替换页面重新刷新加载更新内容
模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块,
而无需重新加载整个页面。主要是通过以下几种方式,来显著加快开发速度:
保留在完全重新加载页面时丢失的应用程序状态。
只更新变更内容,以节省宝贵的开发时间。
调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。
2.配置webpack.config.js
--- hot: true //开启热部署
devServer: {
contentBase: './build', //设置服务器访问的基本目录
host: 'localhost', //服务器ip地址
port: 8080, //服务器端口号
open: true, //自动打开页面
hot: true //开启热部署
},
plugins: [
//热部署插件
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
注意:热部署针对style-loader
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
19、配置开发环境与生成环境
1. 开发环境和生产环境的构建目标差异很大。在开发环境中,我们需要具有强大的、具有实时重新加载或热模
块替换能力 和 localhost server。而在生产环境中,我们的目标则转向于关注更小的 bundle,以及资源的
优化,以改善加载时间。所以我们通常建议为每个环境编写彼此独立的 webpack 配置。
2.使用webpack-merge合并插件
npm install --save-dev webpack-merge
3.拆分文件
创建文件夹config 创建webpack.base.conf.js webpack.dev.conf.js webpack.prod.js
4.webpack.base.conf.js
是放一些我们公用的配置,比如入口entry、出口output、常用loader以及插件等。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
//????
app: "./ldd/index.js"
},
output: {
path: path.resolve(__dirname, '../build'),
filename: "[name][hash].js"
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(jpg|png|gif|jpeg)$/,
use: "file-loader"
}
]
},
plugins: [
new HtmlWebpackPlugin({
//????
template: "./ldd/index.html",
filename: 'index.html',
minify: {
minimize: true, //是否打包为最小值
removeAttributeQuotes: true, //去除引号
removeComments: true, //去除注释
collapseWhitespace: true, //去除空格
minifyCSS: true, //压缩html内的样式
minifyJS: true, //压缩html内的JS
removeEmptyElements: true //清理内容为空的元素
},
hash: true //引入产出资源时加上哈希值避免缓存
})
]
}
5.webpack.dev.conf.js
是在开发环境上的配置,比如devServer配置、模块热替换等方便开发的配置
注意:引入const merge = require('webpack-merge');进行合并base
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const webpackBaseConf = require('./wepack.base.conf.js')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = merge(webpackBaseConf, {
devServer: {
contentBase: '../build/', //设置服务器访问的基本目录
host: 'localhost', //服务器ip地址
port: 8080, //服务器端口号
open: true, //自动打开页面
hot: true //开启热部署
},
plugins: [
//热部署插件
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
//分类css
new ExtractTextPlugin("./css/index.css")
]
})
6.webpack.prod.conf.js
在生产环境上的配置,比如提取分离css、压缩css和js等
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const merge = require('webpack-merge');
const webpackBaseConf = require('./wepack.base.conf.js')
module.exports = merge(webpackBaseConf, {
plugins: [
//copy静态文件到打包后的文件
new CopyWebpackPlugin([{
from: path.resolve(__dirname, '../static/'),
to: path.resolve(__dirname, '../build/static/')
}]),
//删除打包之前的文件重新打包
new CleanWebpackPlugin()
]
})
6.修改package.json
--config 指定使用哪个配置文件
"scripts": {
"dev": "webpack --mode development --config ./config/webpack.dev.conf.js",
"build": "webpack --mode production --config ./config/webpack.prod.conf.js",
"start": "webpack-dev-server --mode development --config ./config/webpack.dev.conf.js"
},
20、resolve
1.module.exports中resolve配置
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
resolve: {
//引入不写后缀名 根据以下数组后缀名匹配
extensions: ['.js', '.vue', '.json'],
//路径别名
alias: {
'@': resolve('src'),
}
},
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
//????
app: "./ldd/index.js"
},
output: {
path: path.resolve(__dirname, '../build'),
filename: "[name][hash].js"
},
resolve: {
//引入不写后缀名 根据以下数组后缀名匹配
extensions: ['.js', '.vue', '.json'],
//路径别名
alias: {
'@': resolve('src'),
}
}
...
...
}