使用webpack 构建简单的vue单页面应用
2018-01-21 本文已影响0人
shibin
准备
- 安装依赖的插件
npm i webpack cross-env style-loader css-loader postcss-loader autoprefixer scss-loader vue vue-loader url-loader file-loader babel-loader babel-core html-webpack-plugin --save-dev
- 编写webpack配置文件(webpack.conf.js)
const webpack = require('webpack')
const {resolve} = require('path')
const htmlPlugin = require('html-webpack-plugin')
module.exports={
target: 'web',
entry: resolve(__dirname, './src/main.js'),
output: {
filename: 'buddle.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}, {
test: /\.jsx$/,
use: ['babel-loader']
}, {
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: 'images/[name].[ext]'
}
}
]
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader', {
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
'sass-loader'
]
}
]
},
plugins:[
new htmlPlugin(),
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev
? '"development"'
: '"production"'
}
}),
new htmlPlugin()
]
]
}
- 编写入口文件main.js
import Vue from 'vue'
import App from './app.vue'
import './css/style.scss'
const root=document.createElement('div')
document.body.appendChild(root)
new Vue({
render:(h)=>h(App)
}).$mount(root)
- 编写app.vue
<template lang="html">
<div>
{{text}}
</div>
</template>
<script>
export default {
data(){
return {
text: 'shibin'
}
}
}
</script>
<style lang="scss">
</style>
- 编写style.scss
$nav-color: #F90;
*{
margin: 0;
padding: 0;
}
html,body{
background: url('./../img/1.jpeg')no-repeat center;
background-size: 100%;
height:100%;
color:
}
- 配置.babelrc,这样就可以在应用里面使用es6的语法了
{
"presets":[
"env"
],
"plugins":[
"transform-vue-jsx"
]
}
- 在postcss.config.js里配置postcss
const autoprefixer = require('autoprefixer')
module.exports = {
plugins: [
autoprefixer()
]
}
-
在pockage.json里面增加build命令
cross-env NODE_ENV=production webpack --config webpack.conf.js
-
执行
npm run build
命令 -
这样一个简单的vue单页面应用已经构建好了
-
若要压缩js文件,需要安装
npm i uglifyjs-webpack-plugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 在webpack plugins 插件增加 new UglifyJsPlugin()
plugins:[
new UglifyJsPlugin()
]
- 如果要单独打包css文件.安装
npm i extract-text-webpack-plugin
const extractPlugin = require('extract-text-webpack-plugin')
//首先在上面配置里修改scss文件的处理
{
test: /\.scss$/,
use: extractPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options:{
minimize:true
}
}, {
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
'sass-loader'
],
publicPath:'../'
})
}
//在webpack plugins 插件增加
new extractPlugin({
filename:'css/[chunkhash].css'
})
- 安装
webpack-dev-server
,这样我们就能实时预览项目.npm i webpack-dev-server
//在上面配置中增加devServer
devServer :{
port: '8000',
host: '0.0.0.0',
overlay: {
errors: true
},
open: true,
hot: true
}
//在上面plugins配置里增加
new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin()
- 在package.json 增加dev命令
cross-env NODE_ENV=development webpack-dev-server --config webpack.conf.js
,这样我们执行npm run dev
就可以进行实时调试我们的项目了