使用webpack从零开始构建vue项目

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