关于前端Vue的webpack的基本只用总结心得

1.先说一下vue webpack 的配置的问题

"scripts": {"dev": "node build/dev-server.js","build": "node build/build.js","lint": "eslint --ext .js,.vue src"
}

我们 npm run dev 便是运行的 第一条命令 ， 类推

build/dev-server.js;require('./check-versions')() // 检查 Node 和 npm 版本
var config = require('../config') // 获取 config/index.js 的默认配置/* 
** 如果 Node 的环境无法判断当前是 dev / product 环境
** 使用 config.dev.env.NODE_ENV 作为当前的环境
*/if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
var path = require('path') // 使用 NodeJS 自带的文件路径工具
var express = require('express') // 使用 express
var webpack = require('webpack') // 使用 webpack
var opn = require('opn') // 一个可以强制打开浏览器并跳转到指定 url 的插件
var proxyMiddleware = require('http-proxy-middleware') // 使用 proxyTable 
var webpackConfig = require('./webpack.dev.conf') // 使用 dev 环境的 webpack 配置// default port where dev server listens for incoming traffic
/* 如果没有指定运行端口，使用 config.dev.port 作为运行端口 */
var port = process.env.PORT || config.dev.port
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
/* 使用 config.dev.proxyTable 的配置作为 proxyTable 的代理配置 */
var proxyTable = config.dev.proxyTable/* 使用 express 启动一个服务 */
var app = express()
var compiler = webpack(webpackConfig) // 启动 webpack 进行编译/* 启动 webpack-dev-middleware，将 编译后的文件暂存到内存中 */
var devMiddleware = require('webpack-dev-middleware')(compiler, {publicPath: webpackConfig.output.publicPath,stats: {colors: true,chunks: false}
})/* 启动 webpack-hot-middleware，也就是我们常说的 Hot-reload */
var hotMiddleware = require('webpack-hot-middleware')(compiler)
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {hotMiddleware.publish({ action: 'reload' })cb()})
})// proxy api requests
// 将 proxyTable 中的请求配置挂在到启动的 express 服务上
Object.keys(proxyTable).forEach(function (context) {var options = proxyTable[context]if (typeof options === 'string') {options = { target: options }}app.use(proxyMiddleware(context, options))
})// handle fallback for HTML5 history API
// 使用 connect-history-api-fallback 匹配资源，如果不匹配就可以重定向到指定地址
app.use(require('connect-history-api-fallback')())// serve webpack bundle output
// 将暂存到内存中的 webpack 编译后的文件挂在到 express 服务上
app.use(devMiddleware)// enable hot-reload and state-preserving
// compilation error display
// 将 Hot-reload 挂在到 express 服务上
app.use(hotMiddleware)// serve pure static assets
// 拼接 static 文件夹的静态资源路径
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
// 为静态资源提供响应服务
app.use(staticPath, express.static('./static'))// 让我们这个 express 服务监听 port 的请求，并且将此服务作为 dev-server.js 的接口暴露
module.exports = app.listen(port, function (err) {if (err) {console.log(err)return}var uri = 'http://localhost:' + portconsole.log('Listening at ' + uri + '\n')// when env is testing, don't need open it// 如果不是测试环境，自动打开浏览器并跳到我们的开发地址if (process.env.NODE_ENV !== 'testing') {opn(uri)}
})
webpack.dev.conf.js
var config = require('../config') // 同样的使用了 config/index.js
var webpack = require('webpack') // 使用 webpack
var merge = require('webpack-merge') // 使用 webpack 配置合并插件
var utils = require('./utils') // 使用一些小工具
var baseWebpackConfig = require('./webpack.base.conf') // 加载 webpack.base.conf
/* 使用 html-webpack-plugin 插件，这个插件可以帮我们自动生成 html 并且注入到 .html 文件中 */
var HtmlWebpackPlugin = require('html-webpack-plugin') // add hot-reload related code to entry chunks
// 将 Hol-reload 相对路径添加到 webpack.base.conf 的 对应 entry 前
Object.keys(baseWebpackConfig.entry).forEach(function (name) {baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})/* 将我们 webpack.dev.conf.js 的配置和 webpack.base.conf.js 的配置合并 */
module.exports = merge(baseWebpackConfig, {module: {// 使用 styleLoadersloaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })},// eval-source-map is faster for development// 使用 #eval-source-map 模式作为开发工具，此配置可参考 DDFE 往期文章详细了解devtool: '#eval-source-map',plugins: [/* definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串 */new webpack.DefinePlugin({'process.env': config.dev.env}),// https://github.com/glenjamin/webpack-hot-middleware#installation--usagenew webpack.optimize.OccurenceOrderPlugin(),/* HotModule 插件在页面进行变更的时候只会重回对应的页面模块，不会重绘整个 html 文件 */new webpack.HotModuleReplacementPlugin(),/* 使用了 NoErrorsPlugin 后页面中的报错不会阻塞，但是会在编译结束后报错 */new webpack.NoErrorsPlugin(),// https://github.com/ampedandwired/html-webpack-plugin/* 将 index.html 作为入口，注入 html 代码后生成 index.html文件 */new HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: true})]
})

webpack.base.conf.jsvar path = require('path') // 使用 NodeJS 自带的文件路径插件
var config = require('../config') // 引入 config/index.js
var utils = require('./utils') // 引入一些小工具
var projectRoot = path.resolve(__dirname, '../') // 拼接我们的工作区路径为一个绝对路径/* 将 NodeJS 环境作为我们的编译环境 */
var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
// various preprocessor loaders added to vue-loader at the end of this file
/* 是否在 dev 环境下开启 cssSourceMap ，在 config/index.js 中可配置 */
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
/* 是否在 production 环境下开启 cssSourceMap ，在 config/index.js 中可配置 */
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
/* 最终是否使用 cssSourceMap */
var useCssSourceMap = cssSourceMapDev || cssSourceMapProdmodule.exports = {entry: {app: './src/main.js' // 编译文件入口},output: {path: config.build.assetsRoot, // 编译输出的静态资源根路径publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, // 正式发布环境下编译输出的上线路径的根路径filename: '[name].js' // 编译输出的文件名},resolve: {// 自动补全的扩展名extensions: ['', '.js', '.vue'],// 不进行自动补全或处理的文件或者文件夹fallback: [path.join(__dirname, '../node_modules')],alias: {// 默认路径代理，例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找'vue$': 'vue/dist/vue.common.js','src': path.resolve(__dirname, '../src'),'assets': path.resolve(__dirname, '../src/assets'),'components': path.resolve(__dirname, '../src/components')}},resolveLoader: {fallback: [path.join(__dirname, '../node_modules')]},module: {preLoaders: [// 预处理的文件及使用的 loader{test: /\.vue$/,loader: 'eslint',include: projectRoot,exclude: /node_modules/},{test: /\.js$/,loader: 'eslint',include: projectRoot,exclude: /node_modules/}],loaders: [// 需要处理的文件及使用的 loader{test: /\.vue$/,loader: 'vue'},{test: /\.js$/,loader: 'babel',include: projectRoot,exclude: /node_modules/},{test: /\.json$/,loader: 'json'},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url',query: {limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url',query: {limit: 10000,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')}}]},eslint: {// eslint 代码检查配置工具formatter: require('eslint-friendly-formatter')},vue: {// .vue 文件配置 loader 及工具 (autoprefixer)loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),postcss: [require('autoprefixer')({browsers: ['last 2 versions']})]}
}

config/index.jsvar path = require('path')module.exports = {build: { // production 环境env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文件assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径assetsSubDirectory: 'static', // 编译输出的二级目录assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名productionSourceMap: true, // 是否开启 cssSourceMap// Gzip off by default as many popular static hosts such as// Surge or Netlify already gzip all static assets for you.// Before setting to `true`, make sure to:// npm install --save-dev compression-webpack-pluginproductionGzip: false, // 是否开启 gzipproductionGzipExtensions: ['js', 'css'] // 需要使用 gzip 压缩的文件扩展名},dev: { // dev 环境env: require('./dev.env'), // 使用 config/dev.env.js 中定义的编译环境port: 8080, // 运行测试页面的端口assetsSubDirectory: 'static', // 编译输出的二级目录assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名proxyTable: {}, // 需要 proxyTable 代理的接口（可跨域）// CSS Sourcemaps off by default because relative paths are "buggy"// with this option, according to the CSS-Loader README// (https://github.com/webpack/css-loader#sourcemaps)// In our experience, they generally work as expected,// just be aware of this issue when enabling this option.cssSourceMap: false // 是否开启 cssSourceMap}
}

build.js// https://github.com/shelljs/shelljs
require('./check-versions')() // 检查 Node 和 npm 版本
require('shelljs/global') // 使用了 shelljs 插件，可以让我们在 node 环境的 js 中使用 shell
env.NODE_ENV = 'production'var path = require('path') // 不再赘述
var config = require('../config') // 加载 config.js
var ora = require('ora') // 一个很好看的 loading 插件
var webpack = require('webpack') // 加载 webpack
var webpackConfig = require('./webpack.prod.conf') // 加载 webpack.prod.confconsole.log( //  输出提示信息 ～ 提示用户请在 http 服务下查看本页面，否则为空白页'  Tip:\n' +'  Built files are meant to be served over an HTTP server.\n' +'  Opening index.html over file:// won\'t work.\n'
)var spinner = ora('building for production...') // 使用 ora 打印出 loading + log
spinner.start() // 开始 loading 动画/* 拼接编译输出文件路径 */
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
/* 删除这个文件夹 （递归删除） */
rm('-rf', assetsPath)
/* 创建此文件夹 */ 
mkdir('-p', assetsPath)
/* 复制 static 文件夹到我们的编译输出目录 */
cp('-R', 'static/*', assetsPath)//  开始 webpack 的编译
webpack(webpackConfig, function (err, stats) {// 编译成功的回调函数spinner.stop()if (err) throw errprocess.stdout.write(stats.toString({colors: true,modules: false,children: false,chunks: false,chunkModules: false}) + '\n')
})

webpack.prod.conf.js
var path = require('path') // 不再赘述
var config = require('../config') // 加载 confi.index.js
var utils = require('./utils') // 使用一些小工具
var webpack = require('webpack') // 加载 webpack
var merge = require('webpack-merge') // 加载 webpack 配置合并工具
var baseWebpackConfig = require('./webpack.base.conf') // 加载 webpack.base.conf.js
/* 一个 webpack 扩展，可以提取一些代码并且将它们和文件分离开 */ 
/* 如果我们想将 webpack 打包成一个文件 css js 分离开，那我们需要这个插件 */
var ExtractTextPlugin = require('extract-text-webpack-plugin')
/* 一个可以插入 html 并且创建新的 .html 文件的插件 */
var HtmlWebpackPlugin = require('html-webpack-plugin')
var env = config.build.env/* 合并 webpack.base.conf.js */
var webpackConfig = merge(baseWebpackConfig, {module: {/* 使用的 loader */loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })},/* 是否使用 #source-map 开发工具，更多信息可以查看 DDFE 往期文章 */devtool: config.build.productionSourceMap ? '#source-map' : false,output: {/* 编译输出目录 */path: config.build.assetsRoot,/* 编译输出文件名 */filename: utils.assetsPath('js/[name].[chunkhash].js'), // 我们可以在 hash 后加 :6 决定使用几位 hash 值// 没有指定输出名的文件输出的文件名chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')},vue: {/* 编译 .vue 文件时使用的 loader */loaders: utils.cssLoaders({sourceMap: config.build.productionSourceMap,extract: true})},plugins: [/* 使用的插件 */// http://vuejs.github.io/vue-loader/en/workflow/production.html/* definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串 */new webpack.DefinePlugin({'process.env': env}),/* 压缩 js (同样可以压缩 css) */new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}),new webpack.optimize.OccurrenceOrderPlugin(),// extract css into its own file/* 将 css 文件分离出来 */new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),// generate dist index.html with correct asset hash for caching.// you can customize output by editing /index.html// see https://github.com/ampedandwired/html-webpack-plugin/* 输入输出的 .html 文件 */new HtmlWebpackPlugin({filename: config.build.index,template: 'index.html',inject: true, // 是否注入 htmlminify: { // 压缩的方式removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true// more options:// https://github.com/kangax/html-minifier#options-quick-reference},// necessary to consistently work with multiple chunks via CommonsChunkPluginchunksSortMode: 'dependency'}),// split vendor js into its own file/* 没有指定输出文件名的文件输出的静态文件名 */new webpack.optimize.CommonsChunkPlugin({name: 'vendor',minChunks: function (module, count) {// any required modules inside node_modules are extracted to vendorreturn (module.resource &&/\.js$/.test(module.resource) &&module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0)}}),// extract webpack runtime and module manifest to its own file in order to// prevent vendor hash from being updated whenever app bundle is updated/* 没有指定输出文件名的文件输出的静态文件名 */new webpack.optimize.CommonsChunkPlugin({name: 'manifest',chunks: ['vendor']})]
})/* 开启 gzip 的情况下使用下方的配置 */
if (config.build.productionGzip) {/* 加载 compression-webpack-plugin 插件 */var CompressionWebpackPlugin = require('compression-webpack-plugin')/* 向webpackconfig.plugins中加入下方的插件 */webpackConfig.plugins.push(/* 使用 compression-webpack-plugin 插件进行压缩 */new CompressionWebpackPlugin({asset: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\\.(' +config.build.productionGzipExtensions.join('|') +')$'),threshold: 10240,minRatio: 0.8}))
}module.exports = webpackConfig
这些是webpack的基本的参考，可以点击收藏加关注哦00。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/246908.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

五种方法提高你的智力

五种方法提高你的智力

五种方法提高你的智力 智力是天生的，一成不变的吗？教你五种方法提高智力：1体验新鲜事物 2挑战自己3有创造力的思考4生活中，多玩“hard”模式5多与他人进行交流 弯兔123 2011-04-04 14:53经验说：智力是天生的&#xff0…
阅读更多...
vue-cli中的webpack的config配置详细说明

vue-cli中的webpack的config配置详细说明

vue-cli中的webpack的config配置详细说明打开我们的vue项目文件夹我们可以清楚的看到文件夹下的三个文件， “dev.env.js”，“index.js”，“prod.env.js”， 我们先打开prod.env.js的文件，看里面的内容：‘use…
阅读更多...
matlab中 text 使用画图示例

matlab中 text 使用画图示例

% Plot the image of the Sensitivity and False Positive per image clear; close all; clc; I1 [0.5 75]; I2 [1 54.5];msize 19; %设定字体的大小hold on plot(I1(1),I1(2),ko-,MarkerFaceColor,r) % 红色实心圆点text(I1(1)0.1,I1(2),Wei 2002) hold on plot(I2(1),I2(2)…
阅读更多...
计算机视觉界CV牛人牛事

计算机视觉界CV牛人牛事

CV人物1：Jianbo Shi史建波毕业于UC Berkeley，导师是Jitendra Malik。其最有影响力的研究成果：图像分割。其于2000年在PAMI上多人合作发表”Noramlized cuts and image segmentation”。这是图像分割领域内最经典的算法。主页：www.…
阅读更多...
vscode编辑器，自己喜欢的颜色

vscode编辑器，自己喜欢的颜色

"workbench.colorCustomizations": { //覆盖当前所选颜色主题的颜色"editor.background": "#1b1b19", //编辑器背景色"editor.selectionBackground": "#3514c554", //用户选中代码段的颜色 "editor.findMatchBackgroun…
阅读更多...
Ubuntu中python切换及pip 安装相应python库

Ubuntu中python切换及pip 安装相应python库

更改python默认版本 只需在终端里面执行 sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 100 sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 150 sudo update-alternatives --install /usr/bin/python python …
阅读更多...
js消息任务队列

js消息任务队列

JS单线程、异步、同步概念 多次出现“事件循环”这个名词，简单说明了事件循环的步骤，以便理解nextTick的运行时机，这篇文章将更为详细的分析下事件循环。在此之前需要了解JS单线程，及由此产生的同步执行环境和异步执行环境。 众所…
阅读更多...
Ubuntu下安装cmake，配置ITK 和 SimpleITK, VTK(已测试可执行)

Ubuntu下安装cmake，配置ITK 和 SimpleITK, VTK(已测试可执行)

curses库 在安装cmake之前应该先安装一下curses库。如果系统中有curses库的话，cmake将生成一个可执行文件ccmake，它是一个基于文本程序的终端，有点类似windows GUI。 sudo apt-get install libncurses5-dev 备注：若无curses库…
阅读更多...
定义［nextTick、事件循环］

定义［nextTick、事件循环］

详情清查收：---》 实例理解nextTick的使用，并给出在页面渲染上的优化巧用 https://www.cnblogs.com/hity-tt/p/6729118.html
阅读更多...
世界坐标与图像坐标

世界坐标与图像坐标

1. 右手坐标系 2. 左手坐标系 伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上。其余的手指指向前方。这样就建立了一个左手坐标系。拇指、食指和其余手指分别代表x，y，z轴的正方向。判断方法：在空间直…
阅读更多...
module.exports与exports，export与export default之间的关系和区别

module.exports与exports，export与export default之间的关系和区别

CommonJS模块规范和ES6模块规范完全是两种不同的概念。 CommonJS模块规范: 根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。 CommonJS规范规定&#xff0…
阅读更多...
Ubuntu下安装 imagej 和 Fiji

Ubuntu下安装 imagej 和 Fiji

安装ImageJ 方法一 sudo apt-get install imagej whereis imagej imagej -version 方法二 下载 Linux版本的 imagej 安装 Instructions cd /home mkdir imagej cp ij150-linux64-java8.zip /home/imagej unzip ij150-linux64-java8.zip 建立软连接，可以在终端…
阅读更多...
vue的diff 算法

vue的diff 算法

1. 当数据发生变化时，vue是怎么更新节点的？ 要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要…
阅读更多...
Ubuntu中python调用SimpleITK来显示图像

Ubuntu中python调用SimpleITK来显示图像

misc.imshow ipython import os from scipy import misc dataDir os.environ["HOME"] "/Downloads/SimpleITK-MICCAI-2001-Tutorial-master/Data" print dataDir image misc.imread(dataDir "FA.png") misc.imshow(image) 或者 ipython i…
阅读更多...
Websocket--- long loop--ajax轮询

Websocket--- long loop--ajax轮询

Websocket--- long loop--ajax轮询,long poll 和 ajax轮询 的原理。 1，首先是 ajax轮询 ，ajax轮询 的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。 2，long poll 其实原理跟 ajax轮询 差不多…
阅读更多...
Linux下设置环境变量

Linux下设置环境变量

单独查看PATH环境变量，可用： echo $PATH11 方法一：在用户主目录下的 profile或 bashrc文件 sudo gedit ~/.profile 或者 sudo gedit ~/.bashrc123123 可以在此文件末尾加入PATH的设置如下： export PATH”$PATH:your path1:you…
阅读更多...
前端解决一像素问题

前端解决一像素问题

一、transform:scale 使用伪类 :after 或者 :before 创建 1px 的边框，然后通过 media 适配不同的设备像素比，然后调整缩放比例，从而实现一像素边框 首先用伪类创建边框 .border-bottom{position: relative;border-top: none !important; }.…
阅读更多...
Python缩进问题

Python缩进问题

Python缩进问题 Python中，是通过代码的缩进，来决定代码的逻辑的。通俗的说，Python中的代码的缩进，不是为了好看，而是觉得代码的含义，上下行代码之间的关系。缩进弄错了，就会导致程序出错&#…
阅读更多...
Ubuntu下安装Pycharm及相关设置

Ubuntu下安装Pycharm及相关设置

下载 Pycharm 社区版本 http://www.jetbrains.com/pycharm/download/#sectionlinux 安装指导 Copy the pycharm-community-2016.2.3.tar.gz to the desired installation location (make sure you have rw permissions for that directory) cp /home/bids/Downloads/pycha…
阅读更多...
Python 编码规范 PEP 8

Python 编码规范 PEP 8

PEP 8 – Style Guide for Python Code 详情可查看官网 https://www.python.org/dev/peps/pep-0008/ 用于查看python代码是否符合风格. sudo apt-get install pep8 使用 pep8 --youfile.py 可以得到以下输出 test2.py是自己写的一个文件): test2.py:1:11: E401 multipl…
阅读更多...
最新文章

Copyright @ 2022~2023