代码拉取完成,页面将自动刷新
'use strict';
require('shelljs/global');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const outputPath = path.resolve(__dirname, './dist');
rm('-rf', outputPath);
module.exports = {
// entry: __dirname + '/src/main.js', // 已多次提及的唯一入口文件
entry: { // 已多次提及的唯一入口文件
app: path.join(__dirname, '/src/main.js'),
// ================================
// 框架 / 类库 分离打包
// ================================
vendor: [
'react', 'react-dom',
],
},
output: {
path: outputPath,
filename: '[name].[chunkhash:6].js',
chunkFilename: '[id].[chunkhash:6].js',
},
devtool: 'null', // 注意修改了这里,这能大大压缩我们的打包代码
devServer: {
contentBase: './src', // 本地服务器所加载的页面所在的目录
historyApiFallback: true, // 不跳转
inline: true,
hot: true,
},
module: {
rules: [{
test: /(\.jsx|\.js)$/,
use: {
loader: 'babel-loader',
},
exclude: /node_modules/,
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]--[hash:base64:5]', // 指定css的类名格式
},
}, {
loader: 'postcss-loader',
options: {
config: {
path: 'postcss.config.js', // 这个得在项目根目录创建此文件
},
},
}],
}),
}],
},
plugins: [
new webpack.BannerPlugin('版权所有,翻版必究'),
new HtmlWebpackPlugin({
template: path.join(__dirname, '/src/index.html'), // 简单的index.html模板,用于生成一个自动引用你打包后的JS文件的新index.html
filename: path.join(__dirname, '/dist/index.html'), // 包含引用js文件的,新index.html文件存放路径
inject: 'body', // 引用js文件的<script>标签插入的位置
}),
new ExtractTextPlugin('css/[name].[chunkhash].css'), // 使css和js文件分离
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'), // 配置的全局常量
}),
new webpack.optimize.OccurrenceOrderPlugin(), // 根据模块调用次数,给模块分配ids,常被调用的ids分配更短的id,使得ids可预测,降低文件大小,该模块推荐使用
new webpack.optimize.UglifyJsPlugin({ minimize: true }), // 压缩JS代码
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor.[hash]', // 入口文件名
filename: 'vendor.[hash].bundle.js', // 打包后的文件名
}),
// new CleanWebpackPlugin('*.*', { // 每次bulid之前清理之前已经build的老文件
// root: outputPath,
// verbose: true,
// dry: false,
// }),
],
};
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。