(精华2020年5月12日更新) vue教程篇 webpack配置详解
package.json的启动
"scripts": {
"build":"rimraf dist && webpack --config webpack.config.js --mode production",
"dev": "webpack-dev-server --config webpack.config.js"
}
基本共用配置文件webpack.common.js
var webpack = require('webpack');
var path = require('path');
var glob = require("glob");
var DIST_PATH = path.resolve(__dirname, './dist');
//入口文件
var SRC_PATH = path.resolve(__dirname, './src');
var newEntries = {};
// var files = glob.sync(path.join(SRC_PATH,'/*.js')); // 方式一
var files = glob.sync(SRC_PATH + '/*.js'); //方式二
files.forEach(function (file, index) {
// var substr = file.split('/').pop().split('.')[0];
var substr = file.match(/src\/(\S*)\.js/)[1];
newEntries[substr] = file;
// [\s]---表示，只要出现空白就匹配；
// [\S]---表示，非空白就匹配；
})
// 声明/dist的路径 为成绝对路径
module.exports = {
// 入口JS路径 的多种处理方式
// 指示Webpack应该使用哪个模块，来作为构建其内部依赖图的开始
// entry: path.resolve(__dirname,'./src/index.js'),
// 支持单文件，多文件打包
// entry: './src/index.js', //方式一
// entry: ['./src/index.js','./src/main.js'], //方法二
// entry: {
// index:'./src/index.js',
// main:'./src/main.js'
// },
entry: newEntries,
// 编译输出的JS入路径
// 告诉Webpack在哪里输出它所创建的bundle，以及如何命名这些文件
output: {
path: DIST_PATH, // 创建的bundle生成到哪里
filename: '[name].[chunkhash:8].js', // 创建的bundle的名称
},
// 模块解析
module: {},
// 插件
plugins: [],
// 开发服务器
devServer: {
clientLogLevel:"none",//日志层级
hot: true, // 热更新，无需手动刷新
contentBase: DIST_PATH, //热启动文件所指向的文件路径
compress:true, //是否启用gzip压缩
host: '0.0.0.0', // host地址
port: 8080, // 服务器端口
historyApiFallback: true, // 该选项的作用所用404都连接到index.html
// 代理到后端的服务地址，会拦截所有以api开头的请求地址
proxy: {
"/api": "http://localhost:3000",
//pathRewrite: {"^/api" : ""} //路径重写
},
useLocalIp: true,//用本地ip
open: true,//自动打开浏览器
noInfo: true//noInfo启用 noInfo 后，诸如「启动时和每次保存之后，那些显示的 webpack 包(bundle)信息」的消息将被隐藏。错误和警告仍然会显示。
//启动后除了启动信息都不会显示
/*
* quit:true,
* */
//可以接受一个app对象（express）处理一些请求
// setup(app){
// app.get('/some/path', function(req, res) {
// res.json({ custom: 'response' });
// });
// },
}
}
-------------------------------------------优化---------------------------------
共用webpack.common.js
var webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var glob = require("glob");
var DIST_PATH = path.resolve(__dirname, './dist');
//入口文件
var SRC_PATH = path.resolve(__dirname,'./src');
var newEntries = {};
// index:'./src/index.js',
// main:'./src/main.js'
// var files = glob.sync(path.join(SRC_PATH,'/*.js')); // 方式一
var files = glob.sync(SRC_PATH+'/*.js'); //方式二
files.forEach(function(file,index){
// var substr = file.split('/').pop().split('.')[0];
var substr = file.match(/src\/(\S*)\.js/)[1];
newEntries[substr] = file;
// [\s]---表示，只要出现空白就匹配；
// [\S]---表示，非空白就匹配；
})
// 声明/dist的路径 为成绝对路径
module.exports = {
// 入口JS路径
// 指示Webpack应该使用哪个模块，来作为构建其内部依赖图的开始
// entry: path.resolve(__dirname,'./src/index.js'),
// 支持单文件，多文件打包
// entry: './src/index.js', //方式一
// entry: ['./src/index.js','./src/main.js'], //方法二
// entry: {
// index:'./src/index.js',
// main:'./src/main.js'
// },
entry:newEntries,
// 编译输出的JS入路径
// 告诉Webpack在哪里输出它所创建的bundle，以及如何命名这些文件
output: {
path: DIST_PATH, // 创建的bundle生成到哪里
// filename: '[name].[chunkhash:8].js', // 创建的bundle的名称
filename: '[name].js', // 创建的bundle的名称
},
// 模块解析
module: {
rules:[
{
test: /\.css$/,
exclude: /node_modules/,
use: [{ loader: "style-loader"}, { loader: "css-loader" } ] //方式一
//use: ["style-loader", loader: "css-loader" ] //方式二
},
{
test: /\.less$/,
exclude: /node_modules/,
use: [
{ loader: "style-loader"},
{ loader: "css-loader" },
{ loader: 'postcss-loader'},
{ loader: "less-loader" } ] //方式一
},
{
test: /\.(png|jpe?g|gif)$/,
//use使⽤用⼀一个loader可以⽤用对象，字符串串，两个loader需要⽤用数组
use: {
loader: "url-loader",
// options额外的配置，比如资源名称
options: {
// placeholder 占位符 [name]⽼老老资源模块的名称
// [ext]⽼资源模块的后缀
// https://webpack.js.org/loaders/file-loader#placeholders
name: "[name]_[hash].[ext]",
//打包后的存放位置
outputPath: "images/" ,
//小于2048B，才转换成base64 的文件打成Base64的格式，写入JS
limit: 2048 ,
publicPath:'/images' //最终生成的CSS代码中，图片URL前缀
}
}
} ,
//babel 配置
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
// options:{
// presets:[ "@babel/preset-env" ] //方法一
// }
},
exclude:/node_modules/
}
]
},
// 插件
plugins: [
new htmlWebpackPlugin({
filename: path.resolve(DIST_PATH,'index.html'), //打包后的文件名
title: '树鱼虚拟充值生态服务平台', //打包后的页面title
template: path.resolve(__dirname,'index.html'), //打包的模板文件
inject: true,//js放在文件的底部
hash: true,
favicon: path.resolve(__dirname, 'favicon.ico')
})
],
}
-------------------------------------------插件使用---------------------------------
生产文件环境webpack.pro.js
const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
const DIST_PATH = path.resolve(__dirname, './dist/');
const commonConfig = require('./webpack.common.js');
module.exports = merge(commonConfig, {
// mode: 'production',
mode:'development',
output: {
path: DIST_PATH, // 创建的bundle生成到哪里
filename: '[name].[chunkhash:8].js', // 创建的bundle的名称
},
// 设置Webpack的mode模式
plugins: [ ]
})
开发文件环境webpack.dev.js
const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const DIST_PATH = path.resolve(__dirname, './dist/');
module.exports = merge(commonConfig, {
mode: 'development',
// 设置Webpack的mode模式
// 开发环境下需要的相关插件配置
output: {
path: DIST_PATH, // 创建的bundle生成到哪里
filename: '[name].js', // 创建的bundle的名称
},
plugins: [ ],
// 开发服务器
devServer: {
hot: true, // 热更新，无需手动刷新
contentBase: DIST_PATH, //热启动文件所指向的文件路径
host: '0.0.0.0', // host地址
port: 8080, // 服务器端口
historyApiFallback: true, // 该选项的作用所用404都连接到index.html
proxy: {
"/api": "http://localhost:3000"
// 代理到后端的服务地址，会拦截所有以api开头的请求地址
} ,
useLocalIp: true
// open:true,
// noInfo:true
}
})
html模块解析
var htmlWebpackPlugin = require('html-webpack-plugin');
// 插件
plugins: [
new htmlWebpackPlugin({
filename: path.resolve(DIST_PATH,'index.html'), //打包后的文件名
title: '树鱼虚拟充值生态服务平台', //打包后的页面title
template: path.resolve(__dirname,'index.html'), //打包的模板文件
inject: true,
hash: true,
favicon: path.resolve(__dirname, 'favicon.ico')
})
],
-------------------------------------------模块解析使用---------------------------------
// 模块解析
module: {
rules:[
{
test: /\.css$/,
exclude: /node_modules/,
use: [{ loader: "style-loader"}, { loader: "css-loader" } ] //方式一
//use: ["style-loader", loader: "css-loader" ] //方式二
},
{
test: /\.less$/,
exclude: /node_modules/,
use: [
{ loader: "style-loader"},
{ loader: "css-loader" },
{ loader: 'postcss-loader'},
{ loader: "less-loader" } ] //方式一
},
{
test: /\.(png|jpe?g|gif)$/,
//use使⽤用⼀一个loader可以⽤用对象，字符串串，两个loader需要⽤用数组
use: {
loader: "url-loader",
// options额外的配置，比如资源名称
options: {
// placeholder 占位符 [name]⽼老老资源模块的名称
// [ext]⽼资源模块的后缀
// https://webpack.js.org/loaders/file-loader#placeholders
name: "[name]_[hash].[ext]",
//打包后的存放位置
outputPath: "images/" ,
//小于2048B，才转换成base64 的文件打成Base64的格式，写入JS
limit: 2048 ,
publicPath:'/images' //最终生成的CSS代码中，图片URL前缀
}
}
} ,
//babel 配置
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
// options:{
// presets:[ "@babel/preset-env" ] //方法一
// }
},
exclude:/node_modules/
}
]
postcss-loader的使用在webpack.common.js中使用，在到当前文件下加postcss.common.js
主要功能是css3 和px-rem转换
module.exports = {
plugins: {
'postcss-preset-env':{},
'postcss-pxtorem':{
rootValue:10,
minPixelValue:2,
propWhiteList: []
}
}
}
对于babel配置太多可以在根目录下建立.babelrc
{
"presets": [
[
"@babel/preset-env", {
"useBuiltIns": "usage", //按需注入
"corejs": "2", // 声明corejs版本
"targets": {
"browsers": [ "> 1%", "last 5 versions", "ie >= 8" ]
}
}
]
],
"plugins":[
// This plugin transforms ES2015 modules to CommonJS.
["@babel/plugin-transform-runtime",{
}]
]
}