通过Webpack新手入门 大家应该对Webpack有了简单的了解了, 这篇文章将结合真实的开发场景一步一步搭建Webpack开发环境与生产环境
项目整体结构大概如下
看过Webpack新手入门 知道一个项目通常会有一个 webpack.config.js 的文件来做配置，当然也可以自由命名配置文件，在输出是 通过 --config 命令指定就好
所以这里，我们设定了3个配置文件 webpack.base.conf.js webpack.dev.conf.js webpack.prod.conf.js
Webpack.base
Base 文件配有一些基础要素包括，会和 通常的webapck.config.js类似
- enrty output
entry: {
app: './src/main.js'
},
output: {
path: path.resolve(__dirname, '../dist/static'),
publicPath: '/dist/static/',
filename: '[name].js'
},
以上很好理解，不做赘述
- resolve
resolve: {
extensions: ['', '.js', '.vue'],
alias: {
'src' : path.resolve(__dirname, '../src'),
'api' : path.resolve(__dirname, '../src/api'),
'route' : path.resolve(__dirname, '../src/route'),
'filters' : path.resolve(__dirname, '../src/filters'),
'directive' : path.resolve(__dirname, '../src/directive'),
'views' : path.resolve(__dirname, '../src/views'),
'components' : path.resolve(__dirname, '../src/components'),
'style' : path.resolve(__dirname, '../src/style'),
'static' : path.resolve(__dirname, '../static'),
'fullCalendar': path.resolve(__dirname, '../src/fullCalendar'),
}
},
extensions : 我们预定义了 .js 和 .vue 的扩展，这样在引用 一个 hello.js 文件时 我们只需要 import Hello from '/path/to/directory/hello' 就能够做到
alias : 一些路径的假名，这样我们就可节省大量时间去计算文件与文件之间的嵌套关系了
- module.loaders
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url',
query: {
limit: 10000,
name: '[name].[ext]?[hash:6]'
}
},
{
test : /\.scss$/,
loader : 'style-loader!css-loader!sass-loader'
},
{
test:/\.css$/,
loader:'style!css'
},
{
test : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader : 'file-loader?name=[name]_[hash:6].[ext]'
}
]
}
loaders : 用以识别不同的文件类型，比如 常用的
代码文件 .vue .js
数据文件 .json
图片文件.(png|jpg|gif|svg)
样式文件.(css|scss)
字体文件.(tff|eot|svg|woff)
他们可能对应不同的loader
- 其他
vue: {
autoprefixer: {
browsers: ['> 1%']
},
loaders: {
scss: 'style!css!sass',
js: 'babel'
}
},
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
}
针对 Vue 我们需要做些特殊处理，比如 为了保证css的浏览器兼容性加入了 autoprefixer 以及针对 style 和 script 部分的不同 loader 指认
针对 Babel 的配置，可参考 Babel官网
Webpack.dev
这个配置将针对我们本机开发时使用，全文如下
var webpack = require('webpack')
var config = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
// eval-source-map is faster for development
config.devtool = '#eval-source-map'
config.output.publicPath = '/'
config.plugins = (config.plugins || []).concat([
// new webpack.optimize.OccurenceOrderPlugin(),
new webpack.NoErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject : true,
minify: {
removeComments: true
}
})
])
config.devServer = {
port : 8080,
// noInfo : true,
// contentBase : '/',
historyApiFallback: true
}
module.exports = config
devtool: 指定sourceMap类型 方便源码定位-
plugins: 一些 额外的插件，不是必须的-
HtmlWebpackPlugin: 以现有html为模板去生成新的html以及相应配置 参考官方
-
-
devServer:webpack-dev-server的相关配置了 参考官方port: 指定好端口historyApiFallback: 如果使用vue-router 的话一定需要设为 true
Webpack.prod
终于到最后了，这个文件将定义打包好的生成文件
var webpack = require('webpack')
var config = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
config.output.filename = '[name].[chunkhash:6].js'
config.output.chunkFilename = '[id].[chunkhash:6].js'
var SOURCE_MAP = true
config.devtool = SOURCE_MAP ? '#source-map' : false
// generate loader string to be used with extract text plugin
function generateExtractLoaders (loaders) {
return loaders.map(function (loader) {
return loader + '-loader' + (SOURCE_MAP ? '?sourceMap' : '')
}).join('!')
}
config.vue.loaders = {
js: 'babel',
// http://vuejs.github.io/vue-loader/configurations/extract-css.html
css: ExtractTextPlugin.extract('vue-style-loader', generateExtractLoaders(['css'])),
scss: ExtractTextPlugin.extract('vue-style-loader', generateExtractLoaders(['css', 'sass']))
}
config.plugins = (config.plugins || []).concat([
// http://vuejs.github.io/vue-loader/workflow/production.html
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.OccurenceOrderPlugin(),
// extract css into its own file
new ExtractTextPlugin('[name].[contenthash:6].css'),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /build/index.template.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: '../index.html',
template: 'index.html',
inject : true,
minify: {
removeComments: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
}
})
])
module.exports = config
之前重复的配置我不再赘述了
output: 注意到我给filename 重新定义了 chunkhash，这是为了避免客户端js 被缓存的问题以及将生产文件分开打包ExtractTextPlugin针对 vue文件里的样式 单独拆分，这样他们会被合并到css文件里去UglifyJsPlugin对js代码的压缩
脚本命令
在package.json文件中我们定义了如下两条命令
"scripts": {
"dev": "webpack-dev-server --config config/webpack.dev.conf.js --hot --inline",
"build": "webpack --config config/webpack.prod.conf.js"
},
npm run dev: 开发时候使用。针对上面第一条 他会跑起 webpack-dev-server 的服务器 去 http://localhost:8080/ 访问npm run build: 打包项目 发到自己的项目服务器上配合相应的apache | nginx就可以外网访问啦
完结
就这样一步一步我们配好了针对vue的webpack配置，比Vue官方的CLI要简单不少，如果有疑问，错误欢迎在评论留言，如果你觉得有用欢迎点赞，打赏哦~
