在这里插入代码片
/*
* @Author: your name
* @Date: 2020-06-01 09:35:50
* @LastEditTime: 2020-06-02 16:47:58
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /univue/Users/yangchanghao/code/webpack/webpack.config.js
*/
// webpack.config.js 作用:指示webpack干什么活,运行webpack时,会参考以下配置
// 基于commen.js
// resolve用来拼接绝对路径方法
const resolve = require("path").resolve
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 1 入口起点
/*
入口详细配置
1 单入口
entry : './src/index.js'
打包形成一个chunk 名字默认是main.js
2 多入口(数组)
entry : ['./scr/index.js','./src/add.js']
只有在HMR里才能让html热更新生效
3 多入口(对象)
entry : {
index : './src/index.js',
add : './src/add.js'
}
有几个入口文件就生产几个chunk,输出几个bandel文件
特殊情况 entry:{index:['./src/index.js','./src/map.js'],add : './src/add.js'};
*/
entry: './src/index.js',
// 2 输入路径
/*
output : {
文件名称 制定文件夹下的文件路径
filename : 'js/[name].js'
输出文件目录 例如vue的dist
path : resolve(__dirname,'dist')
所有输出资源引入的公共路径前缀 ’img/a.png' ---> '/img/a.png' '/'前面是服务器根路径 一般用于开发环境
publicPath : '/' ’img/a.png' ---> '/img/a.png'
publicPath : './' ’img/a.png' ---> './img/a.png'
}
*/
output: {
// 输出文件名
// filename : "js/build.js" 输出到 build/js/build.js
filename: "build.js",
// 输出路径 绝对路径
// __dirname node.js的变量,代表当前文件目录的绝对路径
path: resolve(__dirname, 'build')
// library 输出一个库,为你的入口做导出。
/**
library: {
// 指定库名称
name: 'package',
// 指定库的暴露方式
type: 'var'|'commonjs'|'umd'|'amd|'module'
}
*/
},
// loader 的配置
module: {
rules: [
// 详细的loader的配置
// 不同文件必须配置不同的loader资源
{
// css资源
// 匹配哪些文件
test: /\.css$/,
// 使用什么loader处理
use: [
// 创建一个style标签,将js中的样式资源插入进行,添加到head标签里
'style-loader',
// 将css文件已string形式变成commen.js模块,加载到js里
'css-loader'
]
},
{
// scss解析器
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
// 将scss文件编译成css
'sass-loader',
'postcss-loader'
]
},
{
// img解析器
// 处理不了html图片
test: /\.(png|jpg|gif)$/,
/* use: [ // 使用多个loader
] */
loader: 'url-loader', // 使用一个loader
options: {
// 配置
// 当图片大小小于8kb,就会被转化成base64
// 优点 : 减少请求数量,减轻服务器压力,
// 缺点 :图片体积关于增大
limit: 10 * 1024,
// 关闭url-load的es6模块化,使用commen.js
esModule: false,
// name 对图片重命名
// [hash:10] 取图片的hash前10位
// [ext] 取文件原来的拓展名
name: '[hash:10].[ext]',
// 图片资源输出 输出到build/img
outputPath : 'img'
}
},
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader'
}
} /*
{
test: /\.html$/,
// 处理html文件的img图片
loader: 'html-loader'
} */
/* ,{
// 除了正则里的资源外都使用该loader
exclude : /\.(css|html|js|scss)$/,
loader : 'file-loader',
options :{
name : '[hash:10].[ext]'
}
} */
]
},
// 插件
// 下载 引入 使用
plugins: [
// 详细的插件配置
// 默认创建一个html文件,引入,打包输出所有资源
new HtmlWebpackPlugin(
{
// 复制'./src/index.html'文件,并且引入js和css
template: './src/index.html'
}
) // 打包输出HTML
],
// 模式,是开发模式production还是生产环境development
mode: 'development',
// 开发服务器
// 需要下载webpack-dev-server
devServer: {
// npx webpack-dev-server 会在内存中编译打包,没有输出,实时监听
// 运行目录
contentBase: resolve(__dirname, 'build'),
// 启动gzip压缩 使代码更小
compress: true,
// 端口号
port: 8080,
// 自动打开浏览器
open : true
}
}
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const pages = [
{ template: './src/views/index.html', filename: 'index.html', chunks: ['index', 'main'], title: '主页' },
{ template: './src/views/result.html', filename: 'result.html', chunks: ['result', 'main'], title: '结果页' }
]
const HtmlWebpackPlugins = pages.map(({ template, filename, chunks }) => {
return new HtmlWebpackPlugin({
template,
filename,
chunks,
inject: 'body'
})
})
module.exports = {
entry: {
main: './src/app.ts', // 入口函数
index: './src/js/index.ts',
chunk: './src/js/chunk.js',
result: './src/js/result.js'
},
output: {
filename: 'js/[name].[chunkhash:8].js',
/* publicPath: './', */
path: resolve(__dirname, './dist')
},
resolve: {
alias: {
'@': resolve(__dirname, 'src/')
},
extensions: ['.ts', '.tsx', '.js', '.json']
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
'postcss-loader'
]
},
{
test: /\.(png|jpg|jepg|gif)$/,
loader: 'url-loader',
options: {
// 配置
// 当图片大小小于8kb,就会被转化成base64
// 优点 : 减少请求数量,减轻服务器压力,
// 缺点 :图片体积关于增大
limit: 10 * 1024,
// 关闭url-load的es6模块化,使用commen.js
esModule: false,
// name 对图片重命名
// [hash:10] 取图片的hash前10位
// [ext] 取文件原来的拓展名
name: '[hash:10].[ext]',
// 图片资源输出 输出到build/img
outputPath: 'img'
}
},
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader'
},
{
test: /\.(ts|tsx)$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
performance: {
hints: 'warning',
//入口起点的最大体积 整数类型(以字节为单位)
maxEntrypointSize: 50000000,
//生成文件的最大体积 整数类型(以字节为单位 300k)
maxAssetSize: 30000000,
//只给出 js 文件的性能提示
assetFilter: function (assetFilename) {
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
devServer: {
// npx webpack-dev-server 会在内存中编译打包,没有输出,实时监听
// 运行目录
static: {
directory: resolve(__dirname, './dist'),
},
// 启动gzip压缩 使代码更小
compress: true,
// 端口号
port: 9200,
// 自动打开浏览器
open: true,
// 端口
host: 'localhost',
hot: true,
proxy: {
'/api': {
target: 'https://www.gogbuy.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
mode: 'development',
plugins: [
// 详细的插件配置
// 1. html配置
...HtmlWebpackPlugins,
// 2 css配置
new MiniCssExtractPlugin({
//输出文件夹和文件名
filename: "css/[name].[chunkhash:8].css",
}),
// 每次build清除dist包
new CleanWebpackPlugin()
],
}