vue项目构建中webpack配置(一)

时间 2019-12-02

标签 vue 项目构建 webpack 配置繁體版

原文原文链接

因为脚手架vue-cli的存在,咱们在作vue项目时基本都是用vue-cli搭建的,这就不须要咱们本身配置webpack了.但在实际开发过程当中会发现对webpack不了解的话会出现不少问题.如vue的做者尤雨溪在新手向:Vue2.0的建议学习顺序中所说,了解前端生态/工程化，学习 Webpack 至关重要.在这里我就分享一下我用webpack搭建的Vue项目.

首先咱们简单创建一个项目结构

on文件css

$ npm init

接下来即是安装各类依赖项

$ npm install --save vue安装vue2.0html

$ npm install --save-dev webpack webpack-dev-server安装webpack和webpack测试服务器前端

$ npm install --save-dev babel-core babel-loader babel-preset-es2015安装babel,编译es6vue

$ npm install --save-dev vue-loader vue-template-compiler解析vue组件和.vue的文件node

$ npm install --save-dev css-loader file-loader解析csswebpack

编写页面

App.vue

<template>
    <div id="demo">
        <p>{{msg}}</p>
    </div>
</template>

<script>
  export default {
      data () {
          return {
              msg: 'Hello World!'
          }
      }
  }
</script>

<style scope>
    * {
        color: #FF0000;
    }
</style>

main.js

import Vue from 'vue'
import App from './APP.vue'

new Vue({
    el: '#app',
    render: h => h(App)
})

webpack.config.js

var path = require('paht')  // 引入操做路径模块

module.exports = {
    // 输入文件
    entry: './src/main.js',
    output: {
        // 输出目录
        path: path.resolve(__dirname, './dist'),
        // 静态目录,从这里取文件
        publicPath: '/dist/',
        // 文件名
        filename: 'index.js'
    },
    module: {
        rules: [
            //解析vue后缀文件
            {test: /\.vue$/, loader: 'vue-loader'},
            //用巴babel解析js文件 排除模块安装目录的文件
            {test: /\.js$/, loader: 'babel-loader',exclude: /node_modules/}
        ]
    }
}

打包项目

$ npm install -g webpack安装全局webpack,不然输入webpack命令会报错不是内部命令
webpack用webpack命令打包项目es6

再index.html中引入打包生成的index.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/index.js"></script>
</body>
</html>

打开index.html如图所示

至此打包完成了,可是每次修改时都须要打包一次,开发时效率会很低,因而须要热重载

$ npm install -g webpack-dev-server

$ webpack-dev-server等待程序运行完毕在浏览器中输入localhost:8080查看页面web