1.新建项目文件夹myApp
2. 进入项目文件夹并创建packge.json文件
cd ./myApp
npm init -y
3. 安装项目需要的包
vue:vue框架代码
vue-loader：用于解析.vue文件
vue-template-compiler: 用于将 Vue 2.0 模板预编译为渲染函数,由于它是从vue源码中抽离出来的，因此必须与vue的版本保持一致
css-loader：解析css样式
style-loader:用于生成style标签将解析后的样式放入head中
webpack：webpack打包工具的代码
webpack-cli：webpack4.0以上需要安装
webpack-dev-server: 用于创建本地服务器，查看项目渲染效果，并支持热更新等功能
html-webpack-plugin：用于解析html文件
npm i vue vue-loader vue-template-compiler css-loader style-loader webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
4. 初始化项目结构
(1) 在src文件夹下创建App.vue文件，作为根组件
(2) 在src文件夹下创建index.js作为入口文件
(3) 在根目录下创建index.html,作为生成html文件模板
5. 在根目录下创建webpack配置文件webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode:'development',
entry:'./src/index.js',
module:{
rules:[
{ test:/\.vue$/, use: 'vue-loader'},
{ test: /.css/, use:['style-loader', 'css-loader']}
],
plugins:[
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: path.join(__dirname, './index.html'),
filename: 'index.html'
})
]
}
6. 启动项目
在package.json中的script中添加脚本
"dev": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack.config.js --port 3000 --open"
这样一个简单的vue+webpack的项目就搭建完成了
7. 优化
首先我们可以全局安装webpack-dev-server，这样我们就可以直接使用webpack-dev-server命令啦，package.json中就可以这么改了
"dev": "webpack-dev-server --config webpack.config.js --port 3000 --open"
然后在webpack.config.js中，我们可以使用devServer选项来配置热启动项目时的参数
devServer: {
port: 9000,
host: 'localhost',
hot: true,
open: true
},
这样我们可以进一步简化
"dev": "webpack-dev-server --config webpack.config.js"
另外我们可以使用devtool来控制生成sourceMap，就是说当发生报错时，控制台定位的错误处一般是打包后的文件，难以查看，使用此功能可以控制定位到源代码的位置，更方便定位问题
每个选项的打包结果各有什么不同可以自己试试
另外我们可以使用resolve选项下的alias来添加路径别名，这将极大的方便我们引入文件
resolve:{ alias: { utils: path.resolve(__dirname, 'utils') } }
开发和生产的webpack可能会不一样，因此我们需要将webpack配置文件进行拆分，打包时使用不同的配置文件，公用的配置项单独抽出来，通过merge并到不同环境的配置文件中，比如生产不需要devServer和sourcemap，那我们就可以放在开发配置文件中
const baseWebpackConfig = require('./webpack.config.base.js')
const merge = require('webpack-merge')const path = require('path')
const devWebpackConfig = merge(baseWebpackConfig,
{
devServer: {
port: 9000,
host: 'localhost',
hot: true,
open: true
},
devtool: 'source-map',
resolve: {
alias: {
utils: path.resolve(__dirname, 'utils')
}
}
})
module.exports = devWebpackConfig
网友评论