webpack
webpack 是一个可以让程序员可以使用require() 可以包含js以及css和各种web资源 并且支持一些资源的转换 吧这些资源打包到在一起
初次使用
使用
npm install webpack安装webpack
创建webpack.config.js这个文件 配置output以及entry 运行
webpack命令
使用vue-cli创建vue的webpack工程
初始化
运行vue init webapck
你的项目名称
配置依赖
package.json
//配置文件实例
{
"name": "blog",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "CYQ19931115 <614325722@QQ.COM>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"handlebars": "^4.0.6",
"handlebars-loader": "^1.4.0",
"style-loader": "^0.13.1",
"vue": "^2.1.0",
"vue-router": "^2.1.1"
},
"devDependencies": {
//es2015载入
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
//文件集中管理插件(webpack2的要使用2.0.0)
"extract-text-webpack-plugin": "^2.0.0-beta.4",
//.png等文件
"file-loader": "^0.9.0",
"html-loader": "^0.4.4",
//生成html文件
"html-webpack-plugin": "^2.26.0",
"vue-loader": "^10.0.0",
"vue-template-compiler": "^2.1.0",
"webpack": "^2.1.0-beta.25",
"webpack-dev-server": "^2.1.0-beta.9"
}
}
配置webpack
webpack.config.js
var path = require('path')
var webpack = require('webpack')
var htmlWebpackPlugin=require('html-webpack-plugin')
var Ex=require("extract-text-webpack-plugin")
module.exports = {
//入口文件 可以是多个 用数组标示
entry: './src/main.js',
//输出位置
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '',
filename: 'js/[name].js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this nessessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: 'assets/images/[name].[ext]?[hash]'
},
},
{test:/\.handlebars$/,loader:"handlebars-loader"},
{ test: /\.css$/, loader: Ex.extract({ fallbackLoader: 'style-loader', loader: 'css-loader' }) },
// {
// test:/\.html$/,
// loader:'html-loader'
// }
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map',
plugins:[
new htmlWebpackPlugin({
filename:"index.html",
favicon:'./src/assets/favicon.ico',
template:'./src/tpl/jstpl/index.js',
}),
//集中管理css文件
new Ex("assets/css/[name].css")
]
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
