使用webpack怎么构建一个vue项目
这篇文章给大家介绍使用webpack怎么构建一个vue项目，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
彭州ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-0": "^6.16.0",
"babel-runtime": "^6.18.0",
"css-loader": "^0.25.0",
"debug": "^2.2.0",
"express": "^4.14.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.24.1",
"jquery": "^3.1.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.2.3",
"vue-loader": "^7.3.0",
"webpack": "^1.13.3",
"webpack-dev-middleware": "^1.8.4",
"webpack-dev-server": "^1.16.2",
"webpack-hot-middleware": "^2.13.1"
},
"dependencies": {
"vue": "^1.0.26",
"vue-router": "^0.7.13"
}三、在项目目录下新建一个名为src的目录，里面用于存放入口文件（index.js）、项目源文件（html,css,js,img之类的）、组件（.vue后缀），我的src目录结构大致如下：
src -entry -index.js -pages -components -css -img -js -index.html -public
当然，有输入目录，就有输出目录，即在项目目录下新建一个output目录，用于放置生产出来的各种资源文件。
四、在项目目录下新建一个名为build目录，里面用于存放各种配置文件，涉及到基础配置、开发和生产环境、静态服务器以及热加载，详细的内容请看下面的代码：
1.webpack.config.js（基础配置文件）
// 引入依赖模块
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
// 入口文件，路径相对于本文件所在的位置，可以写成字符串、数组、对象
entry: {
// path.resolve([from ...], to) 将to参数解析为绝对路径
index:path.resolve(__dirname, '../src/entry/index.js'),
// 需要被提取为公共模块的群组
vendors:['vue','vue-router','jquery'],
},
// 输出配置
output: {
// 输出文件，路径相对于本文件所在的位置
path: path.resolve(__dirname, '../output/static/js/'),
// 设置publicPath这个属性会出现很多问题：
// 1.可以看成输出文件的另一种路径，差别路径是相对于生成的html文件；
// 2.也可以看成网站运行时的访问路径；
// 3.该属性的好处在于当你配置了图片cdn的地址，本地开发时引用本地的图片资源，上线打包时就将资源全部指向CDN了，如果没有确定的发布地址不建议配置该属性，特别是在打包图片时，路径很容易出现混乱，如果没有设置，则默认从站点根目录加载
// publicPath: '../static/js/',
// 基于文件的md5生成Hash名称的script来防止缓存
filename: '[name].[hash].js',
// 非主入口的文件名，即未被列在entry中，却又需要被打包出来的文件命名配置
chunkFilename: '[id].[chunkhash].js'
},
// 其他解决方案
resolve: {
// require时省略的扩展名，遇到.vue结尾的也要去加载
extensions: ['','.js', '.vue'],
// 模块别名地址，方便后续直接引用别名，无须写长长的地址，注意如果后续不能识别该别名，需要先设置root
alias:{}
},
// 不进行打包的模块
externals:{},
// 模块加载器
module: {
// loader相当于gulp里的task，用来处理在入口文件中require的和其他方式引用进来的文件，test是正则表达式，匹配要处理的文件；loader匹配要使用的loader，"-loader"可以省略；include把要处理的目录包括进来，exclude排除不处理的目录
loaders: [
// 使用vue-loader 加载 .vue 结尾的文件
{
test: /\.vue$/,
loader: 'vue-loader',
exclude: /node_modules/
},
// 使用babel 加载 .js 结尾的文件
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query:{
presets: ['es2015', 'stage-0'],
plugins: ['transform-runtime']
}
},
// 使用css-loader和style-loader 加载 .css 结尾的文件
{
test: /\.css$/,
// 将样式抽取出来为独立的文件
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader"),
exclude: /node_modules/
},
// 使用less-loader、css-loader和style-loade 加载 .less 结尾的文件
{
test: /\.less$/,
// 将样式抽取出来为独立的文件
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!less-loader"),
exclude: /node_modules/
},
// 加载图片
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader',
query: {
// 把较小的图片转换成base64的字符串内嵌在生成的js文件里
limit: 10000,
// 路径要与当前配置文件下的publicPath相结合
name:'../img/[name].[ext]?[hash:7]'
}
},
// 加载图标
{
test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
loader: 'file-loader',
query: {
// 把较小的图标转换成base64的字符串内嵌在生成的js文件里
limit: 10000,
name:'../fonts/[name].[ext]?[hash:7]',
prefix:'font'
}
},
]
},
// 配置插件项
plugins: []
}2.webpack.dev.config.js（开发环境下的配置文件）
// 引入依赖模块
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// 引入基本配置
var config = require('./webpack.config.js');
// 必须修改原配置中网站运行时的访问路径，相当于绝对路径，修改完之后，当前配置文件下的很多相对路径都是相对于这个来设定；
// 注意：webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹，而是保存到了内存当中
config.output.publicPath = '/';
// 重新配置模块加载器
config.module= {
// test是正则表达式，匹配要处理的文件；loader匹配要使用的loader，"-loader"可以省略；include把要处理的目录包括进来，exclude排除不处理的目录
loaders: [
// 使用vue-loader 加载 .vue 结尾的文件
{
test: /\.vue$/,
loader: 'vue-loader',
exclude: /node_modules/
},
// 使用babel 加载 .js 结尾的文件
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query:{
presets: ['es2015', 'stage-0'],
plugins: ['transform-runtime']
}
},
// 使用css-loader、autoprefixer-loader和style-loader 加载 .css 结尾的文件
{
test: /\.css$/,
// 将样式抽取出来为独立的文件
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader"),
exclude: /node_modules/
},
// 使用less-loader、autoprefixer-loader、css-loader和style-loade 加载 .less 结尾的文件
{
test: /\.less$/,
// 将样式抽取出来为独立的文件
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!less-loader"),
exclude: /node_modules/
},
// 加载图片
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader',
query: {
// 把较小的图片转换成base64的字符串内嵌在生成的js文件里
limit: 10000,
// 路径和生产环境下的不同，要与修改后的publickPath相结合
name: 'img/[name].[ext]?[hash:7]'
}
},
// 加载图标
{
test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
loader: 'file-loader',
query: {
limit: 10000,
// 路径和生产环境下的不同，要与修改后的publickPath相结合
name:'fonts/[name].[ext]?[hash:7]',
prefix:'font'
}
},
]
};
// 重新配置插件项
config.plugins = [
// 位于开发环境下
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"'
}
}),
// 自动生成html插件，如果创建多个HtmlWebpackPlugin的实例，就会生成多个页面
new HtmlWebpackPlugin({
// 生成html文件的名字，路径和生产环境下的不同，要与修改后的publickPath相结合，否则开启服务器后页面空白
filename: 'src/pages/index.html',
// 源文件，路径相对于本文件所在的位置
template: path.resolve(__dirname, '../src/pages/index.html'),
// 需要引入entry里面的哪几个入口，如果entry里有公共模块，记住一定要引入
chunks: ['vendors','index'],
// 要把