webpack打包相关配置
这里写目录标题
- js打包
- loader
- css打包
- less打包
- img打包
- ES6转化为ES5打包
- 支持vue
- vue组件化开发配置
- 关于省略文件后缀名
- plugin
- 添加版权信息
- 打包html的插件
- js压缩
- 搭建本地服务器
- 抽离config设置
- 最终配置好 的base.config.js
- 最终配置好的dev.config
- 最终配置好的prod.config
- 最终配置好的package.json
js打包
- 安装node
- 安装webpack—指定版本
npm i webpack@3.6.0 -g
- 配置文件中的webpack.config.js
const path= require('path');
module.exports={
entry:'./src/aaa.js',//入口
output:{//出口
path:path.resolve(__dirname,'dist'),//node 方法，可以拼接路径
filename:'bundle.js'//导出名称
}
}
- 初始化
备注：
下一级目录：cd 下一级目录
上一级目录：…/
npm init
- 填写名称（英文），然后会出现一个版本号 然后回车
生成文件：
{
"name": "meetwebpack",
"version": "1.0.0",//版本号
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"build": "webpack"
},
"author": "",
"license": "ISC"//开源协议不开源就删除
}
- 安装package.json依赖包
npm install
- 打包
webpack或者npm run build
本地依赖包安装
npm install webpack@3.6.0 --save-dev
loader
可参考中文文档https://www.webpackjs.com/loaders/css-loader/
css打包
- 入口js文件设置require
require('./css/normal.css')
- 安装style-loader css-loader
npm install --save-dev css-loader
npm install style-loader --save-dev
- webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
less打包
- 安装
直接用官网安装会因为版本过高报错
npm install less-loader@4.1.0 --save
- webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}]
}
};
img打包
- url-loader
npm install --save-dev url-loader
- webpack.config.js
limit:
- 数值：文件大小*1024
- 限制文件内的img图片大小 如果大小在限制内会直接加载，并使用base64方式直接加载图片。超过限制大小则需要安装file-loader
npm install --save-dev file-loader
同时需要配置下文件加载路径，在config文件内设置：
publicPath:'dist/'
- 关于图片的命名规范问题：默认是生成一个32位的哈希值，当然可以进行自定义：
- 在option内添加name属性即
- name:‘img/[name].[hash:8].[ext]’
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
}
ES6转化为ES5打包
- loader
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
- config
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['ES2015']
}
}
}
]
}
支持vue
- 应设置运行时依赖
npm install vue --save
- js文件引入vue模块
import Vue from 'vue';
- 配置config
resolve:{
//别名
alias:{
"vue$":'vue/dist/vue.esm.js'
}
}
vue组件化开发配置
- 安装loader
npm install vue-loader vue-template-compiler --save-dev
- config文件
{
text: /\.vue$/,
use:['vue-loader']
}
依旧会报错 此时应修改json 中的vue-loader 为"^13.0.0",然后重新安装 npm install
关于省略文件后缀名
config文件中配置
resolve:{
//省略文件后缀名
extensions:['.js','.css','.vue'],
//别名
alias:{
"vue$":'vue/dist/vue.esm.js'
}
}
plugin
添加版权信息
修改config
const webpack =require('webpack')
module.exports={
...
plugins:[
new webpack.BannerPlugin('最终版权归aa所有')
]
}
打包html的插件
- 安装
npm install html-webpack-plugin --save-dev
- 修改config
const HtmlWebpackPlugin =require('html-webpack-plugin');
plugins:[
new webpack.BannerPlugin('最终版权归aa所有'),
new HtmlWebpackPlugin({
template:'index.html'
})
]
安装完毕可能仍旧报错，此时修改json文件
"html-webpack-plugin": "^3.2.0",
如果这样设置的化path里面的dist路径拼接便不需要了
js压缩
- 安装
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
- config文件内设置：
const uglifyJsPlugin=require('uglifyjs-webpack-plugin')
plugins:[
new webpack.BannerPlugin('最终版权归aa所有'),
new HtmlWebpackPlugin({
template:'index.html'
}),
new uglifyJsPlugin()
]
搭建本地服务器
npm install --save-dev webpack-dev-server@2.9.3
config文件
module.exports={
...
devServer:{
contentBase:'./dist',
//页面实时刷新
inline: true
}
}
json文件最上面大括号设置运行后自动打开
"dev": "webpack-dev-server --open"
运行server
npx webpack-dev-server
ctrl+c中止终端
再次打包
抽离config设置
- 首先抽离基本配置文件单独建立一个js文件，然后抽离production 以及dev时的config配置，目录在根目录
- 安装相应配置
npm install webpack-merge
- 需要合并的文件内设置
const webpackMerge=require('webpack-merge');
const baseConfig=require('./base.config');
//第一个参数为引入的需要合并的文件，第二个参数内容为需要合并的内容
module.exports=webpackMerge(base.config,
{plugins:[
new uglifyJsPlugin() //打包时需要
]}
)
- 修改json文件内的
"scripts": {
"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"
}
修改config文件中的path路径
path: path.resolve(__dirname, '../dist'),//动态获取打包后的文件路径,path.resolve拼接路径
最终配置好 的base.config.js
//1.导入node的path包获取绝对路径，需要使用npm init初始化node包
const path = require('path')
//获取webpack
const webpack = require('webpack')
//获取htmlWebpackPlugin对象
const htmlWbepackPlugin = require('html-webpack-plugin')
//2.配置webpack的入口和出口
module.exports = {
entry: './src/aaa.js',//入口文件
output:{
path: path.resolve(__dirname, '../dist'),//动态获取打包后的文件路径,path.resolve拼接路径
filename: 'bundle.js',//打包后的文件名
// publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.css$/,//正则表达式匹配css文件
//css-loader只负责css文件加载，不负责解析，要解析需要使用style-loader
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}]//使用loader
},
{
test: /\.less$/,//正则表达式匹配css文件
//css-loader只负责css文件加载，不负责解析，要解析需要使用style-loader
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'less-loader'//less文件loader
}]//使用loader
},
{
test: /\.(png|jpg|gif)$/,//匹配png/jpg/gif格式图片
use: [
{
loader: 'url-loader',
options: {
limit: 8192,//图片小于8KB时候将图片转成base64字符串，大于8KB需要使用file-loader
name: 'img/[name].[hash:8].[ext]'//img表示文件父目录，[name]表示文件名,[hash:8]表示将hash截取8位[ext]表示后缀
}
}
]
},
{
test: /\.js$/,
//排除node模块的js和bower的js
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
//如果要使用@babel/preset-env这里需要在根目录新建一个babel的文件
// presets: ['@babel/preset-env']
//这里直接使用指定
presets: ['es2015']
}
}
},
{
test: /\.vue$/,//正则匹配.vue文件
use: {
loader: 'vue-loader'
}
}
]
},
resolve: {
// alias:别名
alias: {
//指定vue使用vue.esm.js
'vue$':'vue/dist/vue.esm.js'
}
},
plugins:[
new webpack.BannerPlugin('最终解释权归zz所有'),
new htmlWbepackPlugin({
template: 'index.html'
})
]
}
最终配置好的dev.config
//导入webpack-merge对象
const webpackMerge = require('webpack-merge')
//导入base.config.js
const baseConfig = require('./base.config')
//使用webpackMerge将baseConfig和dev.config的内容合并
module.exports = webpackMerge(baseConfig, {
devServer: {
contentBase: './dist',//服务的文件夹
port: 4000,
inline: true//是否实时刷新
}
})
最终配置好的prod.config
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
//导入webpack-merge对象
const webpackMerge = require('webpack-merge')
//导入base.config.js
const baseConfig = require('./base.config')
//使用webpackMerge将baseConfig和prod.config的内容合并
module.exports = webpackMerge(baseConfig, {
plugins:[
new uglifyjsWebpackPlugin()
]
})
最终配置好的package.json
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.10.4",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^3.6.0",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.11.3",
"style-loader": "^1.2.1",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^4.1.0",
"vue-loader": "^13.0.0",
"vue-template-compiler": "^2.6.11",
"webpack": "^3.12.0",
"webpack-dev-server": "^2.9.3",
"webpack-merge": "^4.1.5"
},
"dependencies": {
"babel-preset-env": "^1.7.0",
"less-loader": "^4.1.0",
"vue": "^2.6.11"
}
}