vue + webpack 构建项目配置文件小记

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: './dist',// 打包后的文件存放的地方
publicPath: '/dist/',
//      filename: '[name].bundle.[chunkhash:8].js'
// 此选项决定了每个输出 bundle 的名称。这些 bundle 将写入到 output.path 选项指定的目录下。
filename: '[name].bundle.js'// 打包后输出文件的文件名
},
module: {
loaders: [{
test: /\.js$/,//一个匹配loaders所处理的文件的拓展名的正则表达式
loader: 'babel-loader',//loader的名称
exclude: /node_modules/,//include/exclude手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）
query: {
presets: ['es2015']
}//为loaders提供额外的设置选项,解析Es6的babel-preset-es2015包
}, {
test: /\.css$/,
loader: 'style-loader!css-loader'
//感叹号的作用在于使同一文件能够使用不同类型的loader。
}, {
test: /\.vue$/,
loader: 'vue'
}, {
test: /\.scss$/,
loader: 'style!css!sass?sourceMap'
}
]
},
resolve: {
extensions: ['', '.js', '.vue', '.css'],
alias: {
'vue$': 'vue/dist/vue.js'
}
},
//HtmlWebpackPlugin会自动帮你生成一个 html 文件，并且引用相关的 assets 文件(如 css,  bundle.js)。
plugins: [new HtmlWebpackPlugin({

// title: '乐其OMS管理系统',//生成的html文档的标题。配置该项，它并不会替换指定模板文件中的title元素的内容
template: './index_template.html',//本地模板文件的位置
filename: '../index.html',
//输出文件的文件名称，默认为index.html，不配置就是该文件名；filename配置的html文件目录是相对于webpackConfig.output.path路径而言的，不是相对于当前项目目录结构的。
showErrors: true,
//是否将错误信息输出到html页面中。这个很有用，在生成html文件的过程中有错误信息，输出到页面就能看到错误相关信息便于调试。
inject: 'body',
// inject：向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同。

// 1、true或者body：所有JavaScript资源插入到body元素的底部
// 2、head: 所有JavaScript资源插入到head元素中
// 3、false： 所有静态资源css和JavaScript都不会注入到模板文件中
complile: true,
chunks: 'all',
})]
};

webpack 代码分割 - 使用 require.ensure

webpack 在编译时，会静态地解析代码中的require.ensure()，同时将模块添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 通过 jsonp 来按需加载。

require.ensure(dependencies: String[], callback: function(require), chunkName: String)
const configTags = r => require.ensure([], () => r(require('./view/goodsManage/configTags')), 'goods')

npm install webpack --save-dev

简单的写法：-_-,缩写形式

npm i webpack -D

–save

：模块名将被添加到dependencies，可以简化为参数-S。

–save-dev

: 模块名将被添加到

devDependencies

，可以简化为参数

-D

。

webpack打包

新建一个entry.js文件，在终端进入该文件的目录，执行

webpack entry.js bundle.js

会在同目录下生成一个bundle.js文件

运行webpack

webpack

#最基本的启动webpack命令

webpack --display-error-details

#加上后面的参数可以更好定位到问题

webpack --config XXX.js

#使用另一份配置文件

webpack -d

#生成map映射文件，告知哪些模块被最终打包到哪里了

webpack -w

/

webpack --watch

#提供watch方法，实时进行打包更新

webpack -p

#对打包后的文件进行压缩

webpack -d

#提供SourceMaps，方便调试

webpack --colors

#输出结果带彩色，比如：会用红色显示耗时较长的步骤

`webpack –profile“ #输出性能数据，可以看到每一步的耗时

webpack –display-modules` #默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块