使用webpack打包vue工程
最近在研究vue.js,在react中使用的webpack,vue的官网安装的demo工程默认就可以创建webpack的依赖。下面地址可以安装https://cn.vuejs.org/v2/guide/installation.html。文件解释:build中配置了webpack的基本配置、开发环境配置、生产环境配置config中配置了路径端口值等n
·
最近在研究vue.js,在react中使用的webpack,vue的官网安装的demo工程默认就可以创建webpack的依赖。
下面地址可以安装https://cn.vuejs.org/v2/guide/installation.html。
文件解释:
build中配置了webpack的基本配置、开发环境配置、生产环境配置
config中配置了路径端口值等
node_modules为依赖的模块
src放置组件和入口文件
static放置静态资源文件
index.html文件入口
webpack中的一些解释:
new HtmlWebpackPlugin 这个插件的作用是把output输出的文件自动插入到html里
这里不使用elint检查代码。
下面介绍一下打包的两种方式:
一、使用npm run build,可以npm run build 打包文件。
在命令行执行该命令,可以在dist的文件夹下看到打包完成的目录,index.html为入口,static为打包完成的js和css。
![这里写图片描述](https://img-blog.csdn.net/20170717161900618?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjA0NzM5ODU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
但是无法将众多的文件打包成一个文件,下面就要介绍webpack了。
二、使用webpack打包。
Webpack 是一个模块打包工具。在开发中,它把一堆文件中每个都作为一个模块处理,找出它们间的依赖关系,并打包成待发布的静态资源。
http://webpack.github.io/。
直观的效果就是使用webpack可以将使用的vue,css,图片等打包成一个js。
使用webpack打包需要有文件webpack.config.js,在my-project工程下新建webpack.config.js,内容为:
var path = require('path')
var utils = require('./build/utils')
var config = require('./config')
var vueLoaderConfig = require('./build/vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
直接使用webpack打包即可,可以再dist文件夹下发现打包完成的app.js。
![这里写图片描述](https://img-blog.csdn.net/20170717162007906?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjA0NzM5ODU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
在index.html自己引入app.js就可以直接运行了。
更多推荐
已为社区贡献2条内容
所有评论(0)