webpack.config.js基本设置
webpack 有4大观点
- 进口(entry)
- 输出(output)
- loader
- 插件(plugins)
- 进口与出口
//webpack.config.js
const path = require('path')
module.exports = {
mode:'development', // 指定临盆照样开辟
entry:'./src/index.js', // 进口文件
output:{
filename:'bundle.js', // 打包后的文件名
path:path.resolve(__dirname,'./dist') // 这里需指定一个绝对途径 我们须要node的path模块去剖析途径
}
}mode: 指定环境是development照样production 决议了打包出来的文件是紧缩照样未紧缩的
entry： 进口出发点(entry point)指导 webpack 应当运用哪一个模块，来作为构建其内部依靠图的最先。进入进口出发点后，webpack 会找出有哪些模块和库是进口出发点（直接和间接）依靠的。 个中分为单进口跟多进口设置 可所以string，array，object
// entry:'./src/index.js' 是下面的简写
entry:{
main： './src/index.js'
},output:包括打包后的名字跟途径， 假如是多进口运用， 能够设置filename为[name].js， entry里的key值会替换掉name 天生文件夹。
- loader
loader 用于对模块的源代码举行转换。
const path = require('path')
module.exports = {
mode:'development', // 指定临盆照样开辟
entry:'./src/index.js', // 进口文件
output:{
filename:'bundle.js', // 打包后的文件名
path:path.resolve(__dirname,'./dist') // 这里需指定一个绝对途径 我们须要node的path模块去剖析途径
},
module: {
rules: [] // 包括一系列的划定规矩
}
}- plugin
plugin是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 挪用，而且 compiler 对象可在全部编译生命周期接见。
// 代码省略
module: {
rules: [ ] //包括一系列划定规矩
},
plugins: [
// new PluginName 去天生js对象供应 webpack compiler 挪用
]- 当地开辟设置效劳
yarn add webpack-dev-server -D当地开辟须要装置webpack-dev-server 内部是基于express 完成的一个效劳 ，可让让效劳运转在当地，开辟更轻易
装置终了在dist目次下新建一个index.html 而且引入打包好后的bundle.js
运转npx webpack-dev-server
并未显现index.html 须要在webpack-config.js 设置
plugins: [
// new PluginName 去天生js对象供应 webpack compiler 挪用
],
devServer:{
contentBase: './dist', //当前效劳以哪一个作为静态资本途径
host:'localhost', // 主机名 默许是localhost
port:3000, // 端口设置
open:true, // 是不是自动翻开网页
}从新运转npx webpack-dev-server 自动翻开网页而且能一般显现页面
假如以为npx 贫苦的话，能够在package.json 设置剧本
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js"
}款式文件的处置惩罚
注重：为了显现结果，不必每次手动修正html 我们先装一个html模板插件
yarn add html-webpack-plugin -D webpack-config.js 设置
const HtmlWebpackPlugin = require('html-webpack-plugin')
//....
plugins: [
// new PluginName 去天生js对象供应 webpack compiler 挪用
new HtmlWebpackPlugin({
template:'./index.html', // 作为模板的文件
filename:'index.html' //打包天生后的文件
})
],
进入正题：
款式文件分为css，less scss 之类的 须要种种loader 先以css作为 样例
须要先装置 style-loader跟css-loader
- css的处置惩罚
yarn add style-loader css-loader -Dwebpack.config.js 设置
// 代码省略
module: {
rules: [
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
},rules 里放的是一个个划定规矩对象， test是匹配到的文件 loader是从下往上实行， 从右往左实行， 也就是说掷中css末端的文件后 先用css-loader去剖析，剖析终了后交由style-loader 插进去到html模板里
此处use内部 有2种写法
-
loader:['style-loader','css-loader']// 字符串写法 -
loader:['style-loader',{loader:'css-loader',options:{}}对象写法 在options里能够设置你需求的参数
- less的处置惩罚
须要装置less less-loader
yarn add less less-loader -D//webpack-config.js
module: {
rules: [
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
}
]
},sass 设置同理
– 给款式加前缀 如-webkit- 须要装置autoprefixer， postcss-loader
yarn add postcss-loader autoprefixer -D根目次须要新建postcss.config.js
// postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}webpack-config.js
rules: [
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader"
]
}
]- 提取款式文件
yarn add mini-css-extract-plugin -D//config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 注重MiniCssExtractPlugin 不能在development环境中运用 ！！
//....
mode:'production', // 指定临盆照样开辟
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"less-loader"
]
}
]
},
plugins: [
// new PluginName 去天生js对象供应 webpack compiler 挪用
new HtmlWebpackPlugin({
template:'./index.html',
filename:'index.html'
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
//... – 紧缩提取出来的款式文件
须要用到uglifyjs-webpack-plugin，optimize-css-assets-webpack-plugin
yarn add optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D//webpack-config.js
module.exports = {
//...
optimization: { // 优化项 这里OptimizeCSSAssetsPlugin 须要UglifyJsPlugin
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
},
}js文件的处置惩罚
这里天然轮到我们的babel进场啦 把es6剖析为es5 须要这几个loader
yarn add babel-loader @babel/core @babel/preset-env -D {
test:/\.js/,
use:{
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env'
]
}
}
},
es7的语法相似
class Parent{
}这类须要@babel/plugin-proposal-class-properties
yarn add @babel/plugin-proposal-class-properties -D别的装潢器方面须要
yarn add @babel/plugin-proposal-decorators -D {
test:/\.js/,
use:{
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env'
],
plugins: [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }]
]
}
}
},像一些js内置的api 比方天生器 这类须要
yarn add @babel/plugin-transform-runtime -D exclude:/node_modules // 必需设置 不然会剖析到node_modules 里的js
//....
plugins: [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true },"@babel/plugin-transform-runtime"]
]另有一些es7 实例上的某些要领 。字符串的include 这些也要转换
yarn add @babel/polyfill -D须要添加到entry上或许在进口文件导入
全局变量的引入题目
有时候我们不想在每一个模块都导入某个库或许插件 只须要如许设置
plugins: [
// new PluginName 去天生js对象供应 webpack compiler 挪用
new webpack.ProvidePlugin({ // 自动在每一个模块内先导入了React
React:'react'
}),
],静态资本的处置惩罚
yarn add file-loader url-loader -D {
test: /\.png|jpg|gif$/,
use: {
loader:'url-loader',
options:{
limit:2048 // 小于2k 的会用url-loader转为base64 不然file-loader转为实在img
outputPath:'static/image/' //指定输出目次
},
}
},预报： 多页面设置 跨域 辨别差别环境 映照
