webpack可以进行零配置
打包工具，把JS模块进行打包然后输出
打包支持JS的模块化
在使用webpack进行打包的时候，默认情况下会将src下的入口文件index.js进行打包
在不设置mode的情况下，打包出来的文件自动压缩
npx webpack
复制代码设置mode为开发模式，打包后的文件不被压缩
npx webpack --mode development
复制代码注：
node v8.2版本以后都会有一个npx
npx会执行bin里面的文件
当执行npx webpack命令的时候，webpack会自动查找项目中src目录下的index.js文件，然后进行打包，生成一个dist目录并存在一个打包好的main.js文件
生成目录
配置webpack.config.js
新建webpack.config.js文件
在webpack项目下新建一个webpack.config.js文件
异步默认配置文件的名字是webpack.config.js
//webpack是node写出来的node的写法
let path = require(‘path’)
module.exports = {
mode: ‘development’,//模式 默认两种 production development开发模式
entry: ‘./src/index.js’,//入口文件
output:{
filename:‘bundle.js’,//打包后的文件名
path: path.resolve(‘dist’)//路径必须是一个绝对路径,当前目录下产生一个dist目录
}
}
复制代码打包后项目目录
配置脚本
如果觉得命名太长了，就到package.json里面配置一些脚本
“scripts”: {
“build”: “webpack --config webpack.config.js”,
“dev”: “webpack-dev-server”
},
复制代码这里的–config指的是添加配置文件，webpack.config.js文件名
执行npm run build就是我们打包后的文件，这是生产环境下、上线需要的文件
执行npm run dev 是我们开发环境下的文件
配置入口文件的类型
单入口和单出口
entry:’./src/index.js’
复制代码多入口和单出口
有的时候我们有多个页面，就需要使用多个出口
entry:[’./src/index.js’,’./src/other.js’]
复制代码多入口和多出口
//webpack是node写出来的node的写法
let path = require(‘path’);
module.exports = {
entry: {
index: ‘./src/index.js’,
other:’./src/other.js’
},
output:{
filename: ‘[name].js’,
path: path.resolve(‘dist’)
},
}
复制代码这个时候npm run build，就会看到两个打包好的JS文件
配置HTML模板
安装插件
yarn add html-webpack-plugin -D
复制代码新建index.html
在src目录下边新建一个index.html文件
touch index.html
复制代码单页面开发
再webpack.config.js里面引用
//webpack是node写出来的node的写法
let path = require(‘path’);
let HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
entry: ‘./src/index.js’,//入口文件
output: {
// 添加hash可以防止文件缓存，每次都会生成4位的hash串
filename: ‘bundle.[hash:4].js’,
path: path.resolve(‘dist’)
},
plugins: [
// 通过new一下这个类来使用插件
new HtmlWebpackPlugin({
// 在src目录下创建一个index.html
template: ‘./src/index.html’,
hash: true, // 会在打包好的bundle.js后面加上hash串
})
]
}
复制代码执行
接着npm run build执行一下
打包后自动引入JS
多页面开发
开发的时候有时候不止一个页面，会要配置多个页面
我们把之前的dist目录删掉
再webpack.config.js里面引用
//webpack是node写出来的node的写法
let path = require(‘path’);
let HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
// 多页面开发，怎么配置多页面
entry: {
index: ‘./src/index.js’,
other: ‘./src/other.js’
},
// 出口文件
output: {
filename: ‘[name].js’,
path: path.resolve(‘dist’)
},
plugins: [
new HtmlWebpackPlugin({
template: ‘./src/index.html’,
filename: ‘index.html’,
chunks: [‘index’] // 对应关系,index.js对应的是index.html
}),
new HtmlWebpackPlugin({
template: ‘./src/other.html’,
filename: ‘other.html’,
chunks: [‘other’] // 对应关系,login.js对应的是login.html
})
]
}
复制代码执行
接着npm run build执行一下，就会看到dist目录下边多了两个文件
配置CSS模块
安装
yarn add style-loader css-loader -D
yarn add less less-loader -D
复制代码新建文件
在src目录下 新建一个style.css文件
在src目录下 新建一个style.less文件
src/index.js
import ‘./style.css’;
import ‘./style.less’;
复制代码webpack.config.js
//webpack是node写出来的node的写法
let path = require(‘path’);
// webpack.config.js
module.exports = {
entry: {
index: ‘./src/index.js’
},
output: {
filename: ‘bundle.js’,
path: path.resolve(‘dist’)
},
module: {
rules: [
{
test: /.css$/, // 解析css
use: [‘style-loader’, ‘css-loader’] // 从右向左解析
}
]
}
}
复制代码接着npm run build执行一下
执行后目录截图
拆分单个CSS
安装
yarn add mini-css-extract-plugin -D
复制代码新建文件
src文件下边新建css文件和less文件
css文件下边新建style.css文件
less文件下边新建style.less文件
index.js
import ‘./css/style.css’;
import ‘./less/style.less’;
复制代码webpack.config.js
let MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: [MiniCssExtractPlugin.loader, ‘css-loader’]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: ‘css/ming.css’
})
]
}
复制代码执行后目录截图
拆分多个css
index.js
import ‘./css/style.css’;
import ‘./css/reset.less’;
复制代码webpack.config,js
let ExtractTextWebpackPlugin = require(‘extract-text-webpack-plugin’);
let styleLess = new ExtractTextWebpackPlugin(‘css/style.css’);
let resetCss = new ExtractTextWebpackPlugin(‘css/reset.css’);
module.exports = {
module: {
rules: [
{
test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 113: …})
}̲,
{…/,
use: styleLess.extract({
use: ‘css-loader’
})
}
]
},
plugins: [
styleLess,
resetCss
]
}
复制代码执行后目录截图
引入图片打包
安装
yarn add file-loader url-loader -D
复制代码file-loader默认会在内部生成一张图片 到build目录下
url-loader是通过base64编码的方法来展示图片
JS创建图片引入
src/index.js
import logo from ‘./logo.jpg’//把图片引入，返回的结果是一个新的图片地址
let image = new Image();
image.src = ‘./logo.jpg’//就是一个普通的字符串
document.body.appendChild(image);
复制代码webpack.config.js
{
test:/.(jpg|png|gif|svg)KaTeX parse error: Expected group after '_' at position 48: …lude:path.join(_̲_dirname,'./src…/,
use: ‘file-loader’
},
]
复制代码引入字体图片和svg图片
webpack.config.js
rules:[
{
test: /.(png|jpg|gif)KaTeX parse error: Expected 'EOF', got '}' at position 218: … }
}̲,
]
复制代码…/,
use: [‘style-loader’, ‘css-loader’, ‘postcss-loader’]
}
]
}
}
复制代码转成es6语法
Babel会将ES6的代码转成ES5的代码
安装
yarn add babel-core babel-loader babel-preset-env babel-preset-stage-0 -D
复制代码webpack.config.js
module.exports ={
module:{
rules:[
{
test:/.js$/,
use:{
loader:‘babel-loader’,
options:{//用babel-loader 需要把es6转换成es5
presets:[
‘@babel/preset-env’
]
}
}
},
}
}
复制代码服务器配置
webpack.config.js里添加
devServer: {//开发服务器的配置
host: ‘localhost’, //默认是localhost
port: 3000,//端口
progress: true,//希望在内存中打包看到一个进度条
contentBase:’./build’,//希望./build目录作为静态目录
compress: true
},
复制代码配置source-map
webpack.config.js添加
源码调试，会单独生成一个sourcemap文件 出错了 表示 当前报错的列和行
devtool: ‘source-map’ //添加映射文件，可以帮我们调试源代码
复制代码不会参数单独的文件，但是可以显示行和列
devtool:‘eval-source-map’,
复制代码不会参数列，但是是一个单独的映射文件
devtool: ‘cheap-module-source-map’ //产生后你可以保留起来
复制代码不会产生文件，集成在打包后的文件中，不会参数列
devtool:‘cheap-module-eval-source-map’
复制代码打包前清除输出目录
安装
yarn add clean-webpack-plugin -D
复制代码webpack.config.js添加
let CleanWebpackPlugin = require(‘clean-webpack-plugin’);
module.exports = {
plugins: [
new CleanWebpackPlugin(‘dist’)
]
}
复制代码热更新
以前每次页面更新都要重新更新，热更新是只更新某个部分
代码编写
devServer:{
hot: true,
}
plugins:[
//热更新插件
new webpack.NamedModulesPlugin(),//打印更新的模块路径
new webpack.HotModuleReplacementPlugin() //热更新插件
]
复制代码resolve属性的配置
resolve常用来配置别名和省略后缀名
代码编写
resolve:{//解析 第三方包
modules:[path.resolve(‘node_modules’)],
extensions:[’.js’,’.css’,’.json’,’.vue’],
mainFiles:[],//入口文件的名字index.js
alias:{//别名
bootstrap:'bootstrap/dist/css/bootstrap.css'
}
},
复制代码抽离公共代码
在多个页面中抽取页面的代码
代码编写
module.exports = {
//优化
optimization:{
splitChunks:{
//分离代码块
cacheGroups:{
//缓存组
common:{
//公共的模块
chunks: ‘initial’,
minSize:0,
minChunks:2,
},
vendor:{
priority:1,
test:/node_modules/,//把你抽离出来
chunks: ‘initial’,
minSize: 0,
minChunks: 2,
}
}
}
},
}
复制代码webpack自带优化
import 在生产环境下 会自动去除掉没用的代码
tree-shaking 把没用的代码 自动删除掉
es6模块会把结果放在defalut上
scope hosting作用域提升
。
