在plugins里有一个 new Jarvis 这里的端口是1337，项目运行后可以打开这个端口来看下文件大小，项目运行是否出错等等, 这个可视化窗口功能还不错，适合有双屏的同学
接下来看下 webpack.prod.conf.js
const webpackConfig = { entry: { index: './src/index.js' }, //webpack4默认会去查找./src/index.js output: { path: config.build.outputPath, publicPath: 'https://www.jb51.net/', filename: utils.assetsPath('js/[name].[chunkhash:8].js'), chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].js') }, mode: 'production', devtool: 'false', module: { rules: [] }, optimization: { runtimeChunk: { //获取页面共同引用的代码 name: "manifest" }, splitChunks: { chunks: 'initial', minChunks: 2, maxInitialRequests: 5, minSize: 30000, // maxInitialRequests: 3, automaticNameDelimiter: '~', cacheGroups: { vendors: { name: 'vendors', test: /[\\/]node_modules[\\/]/, priority: -10, enforce: true, }, default: { test: /[\\/]src[\\/]/, priority: -20, reuseExistingChunk: true } } } }, plugins: [ new WebpackBar({ minimal: false, }), new HtmlWebpackPlugin({ filename: path.join(config.build.htmlShortPath, 'index.html'), template: config.build.templatePath, inject: true, chunks: ['manifest', 'index'], // 引入index.js minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: false } }), //css压缩 new OptimizeCssAssetsPlugin({ assetNameRegExp: /\.css$/g, cssProcessor: require('cssnano'), cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, canPrint: true }), ] };
这里说下在output下的publicPath，如果要把打包后的文件指向一个相对路径要加上 / 要不然生成出来的的入口文件会变成 resources/js/xxx.js 而不是我们期待的 /resources/js/xxx.js 再则图片的路径也会变成 resources/image/...png ,这样是无效的路径，当然这还是要看你用的是相对路径还是绝对路径了
来看下 optimization 这个东西，这是webpack4新加的功能用于代码的合并策略，这里是对两个地方的js进行合并一个是npm包一个是项目下的代码
cacheGroups: { vendors: { name: 'vendors', test: /[\\/]node_modules[\\/]/, priority: -10, enforce: true, }, default: { test: /[\\/]src[\\/]/, priority: -20, reuseExistingChunk: true } }
这是符合合并规则条件的共同设置
chunks: 'initial', minChunks: 2, maxInitialRequests: 5, minSize: 30000, // maxInitialRequests: 3, automaticNameDelimiter: '~',
也可以把他们拎到具体的合并对象下去做单独的规则设置
然后在 plugins 下引用上面的合并后的js
new HtmlWebpackPlugin({ filename: path.join(config.build.htmlShortPath, 'index.html'), template: config.build.templatePath, inject: true, chunks: ['manifest', 'index'], // 引入index.js minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: false } }),
chunks 它有如下三个模式,可自行调整
async表示只从异步加载得模块（动态加载import()）里面进行拆分
initial表示只从入口模块进行拆分
all表示以上两者都包括
再看下 dev-server.js 启动项入口
let port = process.env.PORT || config.dev.port; const app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.engine('html', ejs.__express); app.set('view engine', 'html'); app.set('views', path.resolve(__dirname, 'views')); app.use(compression()); //开启gzip //webpack编译器 const compiler = webpack(webpackConfig); //webpack-dev-server 中间件 const devMiddleware = require('webpack-dev-middleware')(compiler, { //这里必填 与webpack配置的路径相同 publicPath: webpackConfig.output.publicPath, stats: { colors: true, chunks: false, } }) //热更新中间件 const hotMiddleware = require('webpack-hot-middleware')(compiler); //处理本地开发环境下的代理接口 Object.keys(config.dev.proxyTable).forEach(function(context) { const options = config.dev.proxyTable[context]; if (typeof options === 'string') { options = { target: options } } if (~context.indexOf(',')) { context = context.split(','); } app.use(proxyMiddleware(context, options)); }) app.use(devMiddleware); app.use(hotMiddleware); // 静态资源目录 指向static目录 app.use(express.static('./static')); app.get('/*', function(req, res) { res.render('index'); }); //无路由时跳转404 app.get('*', function(req, res) { res.render('404'); }) app.listen(port, function() { console.log('node启动 正在监听端口：', port) })
这里利用 nodejs 调用模板进行页面渲染
app.set('views', path.resolve(__dirname, 'views'));
指向的是当前 build 下的 views 目录下的html文件,
开启热更新和开发接口代理
app.use(devMiddleware); app.use(hotMiddleware);
app.use(express.static('./static')); 指向本地的静态资源
比如本地的图片路径是 /images/jpge.jpg ,
在开发环境下访问就会变成 :8080/static/images/jpge.jpg ,
app.get('/*', function(req, res) { res.render('index'); });
把所有路径直接指向到 views/index.html 下 文件内容如下