webpack v4 常用配置（以配置vue ssr的webpack为例）

webpack.base.config.js

/*** 公共配置*/
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const path = require('path')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const resolve = file => path.resolve(__dirname, file)//可以通过cross-env设置环境变量node scripts中的环境变量值
const isProd = process.env.NODE_ENV === 'production'module.exports = {//以 生产 or 开发 模式进行打包：生产模式会自动开启部分打包优化功能；开发模式会加快打包速度mode: isProd ? 'production' : 'development',//打包后的输出文件配置output: {//存放路径：参数是相对当前文件所在的位置path: resolve('../dist/'),//配置打包后的资源文件请求的基础路径：避免和路由发生冲突publicPath: '/dist/',//打包后的文件名称：name 表示获取入口文件配置的名称；chunkhash 表示模块内容发生变化打包后所产生的唯一标志，可用于强制浏览器重新请求新的资源（也可取 hash、contenthash 区别自查）filename: '[name].[chunkhash].js'},// 解析： 配置模块如何解析resolve: {alias: {// 路径别名：表示 @ 指向 src'@': resolve('../src/')},// 配置加载资源的时候可以省略的扩展名// 当省略扩展名的时候，按照从前往后的顺序依次解析extensions: ['.js', '.vue', '.json']},// 配置sourceMap的模式：sourceMap是一个源代码和打包代码映射关系信息的文件，专门用于调试和debug；有10+种值可配置。devtool: isProd ? 'source-map' : 'cheap-module-eval-source-map',module: {// 配置不同文件的loader加载器rules: [// 处理图片资源{test: /\.(png|jpg|gif)$/i,use: [{loader: 'url-loader',options: {limit: 8192,},},],},// 处理字体资源{test: /\.(woff|woff2|eot|ttf|otf)$/,use: ['file-loader',],},// 处理 .vue 资源{test: /\.vue$/,loader: 'vue-loader'},// 处理 CSS 资源// 它会应用到普通的 `.css` 文件// 以及 `.vue` 文件中的 `<style>` 块{test: /\.css$/,// 当取值为数组时，从后向前依次执行use: ['vue-style-loader','css-loader']},// CSS 预处理器，参考：https://vue-loader.vuejs.org/zh/guide/pre-processors.html// 例如处理 Less 资源// {//   test: /\.less$/,//   use: [//     'vue-style-loader',//     'css-loader',//     'less-loader'//   ]// },]},// 配置公共插件plugins: [new VueLoaderPlugin(),new FriendlyErrorsWebpackPlugin()]
}

webpack.client.config.js


/*** 客户端打包配置*/
const { merge } = require('webpack-merge')
const baseConfig = require('./webpack.base.config.js')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')module.exports = merge(baseConfig, {//配置打包入口文件//注意：这里配置的路径是 相对于你【使用打包命令】时的相对路径entry: {app: './src/entry-client.js'},module: {rules: [// ES6 转 ES5{test: /\.m?js$/,// 配置排除的文件名exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'],cacheDirectory: true,plugins: ['@babel/plugin-transform-runtime']}}},]},// optimization ： 配置相关打包优化的选项// 重要信息：这将 webpack 运行时分离到一个引导 chunk 中，// 以便可以在之后正确注入异步 chunk。optimization: {// 配置代码分割splitChunks: {name: "manifest",minChunks: Infinity}},plugins: [// 此插件在输出目录中生成 `vue-ssr-client-manifest.json`。new VueSSRClientPlugin()]
})

webpack.server.config.js


/*** 服务端打包配置*/
const { merge } = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack.base.config.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')module.exports = merge(baseConfig, {// 将 entry 指向应用程序的 server entry 文件entry: './src/entry-server.js',// 这允许 webpack 以 Node 适用方式处理模块加载// 并且还会在编译 Vue 组件时， 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。target: 'node',output: {filename: 'server-bundle.js',// 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)libraryTarget: 'commonjs2'},// 配置不打包的文件// nodeExternals 插件：不打包 node_modules 第三方包，而是保留 require 方式直接加载externals: [nodeExternals({// 白名单中的资源依然正常打包allowlist: [/\.css$/]})],plugins: [// 这是将服务器的整个输出构建为单个 JSON 文件的插件。// 默认文件名为 `vue-ssr-server-bundle.json`new VueSSRServerPlugin()]
})

webpack v4 常用配置（以配置vue ssr的webpack为例）相关推荐

Vue SSR（Vue2 + Koa2 + Webpack4）配置指南
正如Vue官方所说,SSR配置适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读.请先移步 ssr.vuejs.org 了解手工进行SSR配置的基本内容. 从头搭建一个服务端 ...
vue 判断页面加载完成_在Vue+webpack中详细讲解基础配置
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下. 最近在学习webpack,跟着课程一个单页面应用,在这里记录一下. 这个部分主要讲了如何配置webpack的环境,以及 ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
vs vue 查看webpack安装成功_在Vue+webpack中详细讲解基础配置
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下. 最近在学习webpack,跟着课程一个单页面应用,在这里记录一下. 这个部分主要讲了如何配置webpack的环境,以及 ...
从零开始手写vue项目的webpack基础配置
一.创建目录结构执行yarn init, 生成package.json文件; 1.写入文件建立目录结构可参考vue项目目录结构: 首先建立一个src文件夹,其中包含index.html,App.v ...
宝塔环境下配置PM2+NODE+VUE+WEBPACK环境
1.安装宝塔界面: 2.在宝塔界面"软件管理"或"软件商店"安装PM2: 3.检查是否安装成功和版本号,用SSH登陆服务器:输入: a.node -v 命令:查 ...
webpack打包后引用cdn的js_呕心沥血编写的webpack多入口零基础配置【建议收藏】...
最近在做项目的时候遇到了一个场景:一个项目有多个入口,不同的入口,路由.组件.资源等有重叠部分,也有各自不同的部分.由于不同入口下的路由页面有一些是重复的,因此我考虑使用 Webpack 多入口配置来 ...
webpack打包压缩混淆_细说webpack系列 3. webpack-cli 零配置打包
大家好!我是萝卜,webpack 4 带来了大量的更新,其中一个就是webpack 4 默认不需要配置文件,下面就带大家体验一下! 初始化项目首先创建项目,创建一个名为webpack的文件夹,进入文 ...
结合webpack配置_呕心沥血编写的webpack多入口零基础配置【建议收藏】
最近在做项目的时候遇到了一个场景:一个项目有多个入口,不同的入口,路由.组件.资源等有重叠部分,也有各自不同的部分.由于不同入口下的路由页面有一些是重复的,因此我考虑使用 Webpack 多入口配置来 ...
vue-cli3以后，关于webpack打包等的相关配置
vue-cli3以后,关于webpack打包等的相关配置最近刚入职一家新的公司,接手了一个新的项目!做一个人脸系统相关的后台管理系统!领导让我选择自己拿手的技术框架,我毫不犹豫的选择了 vue-cl ...

webpack v4 常用配置（以配置vue ssr的webpack为例）

webpack v4 常用配置（以配置vue ssr的webpack为例）相关推荐

最新文章

热门文章