Vue项目使用webpack进行项目开发环境搭建

为什么需要webpack

现在的前端，越来越复杂，特别是SPA（single page web application）流行之后，一个应用程序往往会依赖很多其他的模块，或者编译scss、less、stylus等，如果仅仅是靠人来管理是不可能的，这个时候我们必须依赖于webpack来解决。

现在最流行的三个SPA的框架，都于webpack紧密相连。

• React.js + webpack
• Vue.js + webpack
• Angular.js + webpack

学习webpack有4个重点内容：

• 入口(entry)
• 输出(output)
• 加载器(loader)
• 插件(plugins)

webpack安装

注意：请先安装node环境

npm install webpack@3.11.0 -g

建议大家这样操作(随时切换镜像源)：

1. npm install nrm -g // 安装nrm
2. nrm ls // 查看镜像源
3. nrm use taobao // 选择淘宝镜像，也可以选择cnpm

使用webpack
01-webpack-cli

使用命令：webpack 输入文件路径 打包后文件路径将一个文件打包成另外一个文件
02-webpack-config

1. 配置webpack.config.js

2. 运行webpack
   var path = require('path')

   module.exports = {
     // 入口文件配置
     entry: "./src/app.js",
   
     // 出口文件配置项
     output: {
       // 输出的路径，webpack2起就规定必须是绝对路径
       path: path.join(__dirname, 'dist'),
       // 输出文件名字
       filename: "bundle.js"
     }
   }
   

03-webpack-dev-server

默认为--inline模式

1. 运行：npm init -y
2. 运行：npm i webpack-dev-server@2.9.7 webpack@3.11.0 -D

      var path = require('path')
      module.exports = {
        // 入口文件配置
        entry: "./src/app.js",
    
        // 输出配置
        output: {
          // 输出的路径
          path: path.join(__dirname, 'dist'),
          // 静态资源在服务器上运行时的访问路径，可以直接 http://localhost:8080/dist/bundle.js访问到服务器中的bundle.js文件
          publicPath: '/dist',
          // 输出文件名字
          filename: "bundle.js"
        }
      }

1. index.html中修改 <script src="/dist/bundle.js"></script>
2. 运行：webpack-dev-server
3. 运行：webpack-dev-server --inline --hot --open --port 8090
4. 配置script："dev": "webpack-dev-server --inline --hot --open --port 8090"
5. npm run dev

04-webpack-css

1. 安装npm install css-loader style-loader --save-dev

      module: {
        rules: [
          // 配置的是用来解析.css文件的loader(style-loader和css-loader)
          {
            // 1.0 用正则匹配当前访问的文件的后缀名是  .css
            test: /\.css$/,
            use: ['style-loader', 'css-loader'] //webpack底层调用这些包的顺序是从右到左
          }
        ]
      }

05-webpack-less&webpack-sass

npm install less less-loader sass-loader node-sass --save-dev

    {
        test: /\.less$/,
        use: [{
            loader: 'style-loader'
        }, {
            loader: 'css-loader'
        }, {
            loader: 'less-loader'
        }]
    },

    {
        test: /\.scss$/,
        use: [{
            loader: 'style-loader'
        }, {
            loader: 'css-loader'
        }, {
            loader: 'sass-loader'
        }]
    }

06-webpack-图片&字体

1. npm install file-loader url-loader --save-dev

url-loader封装了file-loader

    {
        test: /\.(png|jpg|gif)/,
        use: [{
            loader: 'url-loader',
            options: {
              // limit表示如果图片大于50000byte，就以路径形式展示，小于的话就用base64格式展示
                limit: 50000
            }
        }]
    }

07-webpack-html

1. npm install html-webpack-plugin --save-dev

2. 如果添加了title，需要在模板中添加<%= htmlWebpackPlugin.options.title %>

   // 注意需要注释掉publicPath，不然会冲突

   var HtmlWebpackPlugin = require('html-webpack-plugin')

   plugins: [
   new HtmlWebpackPlugin({
   filename: 'index.html',
   template: 'template.html'
   })
   ]

08-webpack-babel

1. npm install babel-core babel-loader babel-preset-env --save-dev

注意：

webpack 1.x | babel-loader <= 6.x

webpack 2.x | babel-loader >= 7.x (推荐) (^6.2.10 也能用, 但是会出现不推荐使用的警告)

webpack 3.x | babel-loader >= 7.1

        {
          test: /\.js$/,
          // Webpack2建议尽量避免exclude，更倾向于使用include
          // exclude: /(node_modules)/, // node_modules下面的.js文件会被排除
          include: [path.resolve(__dirname, 'src')]
          use: {
            loader: 'babel-loader',
            // options里面的东西可以放到.babelrc文件中去
            options: {
              presets: ['env']
            }
          }
        }
    
    // .babelrc文件内的配置
    {
      "presets":["env"]
    }

结合webpack处理单文件组件

配置webpack相关loader

1. npm install vue --save
2. npm install vue-loader vue-template-compiler --save-dev

    {
        test: /\.vue$/,
        loader: 'vue-loader'
    }
    ```
    // 如果使用的是webpack1.x，还需要安装 `babel-plugin-transform-runtime`,并添加一下配置；如果是webpack2.x以上请忽略一下配置

{
  test: /\.js$/,
  include: [path.resolve(__dirname, 'src')],
  use: {
    loader: 'babel-loader',
    // options里面的东西可以放到.babelrc文件中去
    options: {
      presets: ['env']
      // plugins: ['transform-runtime']
    }
  }
}

使用vue文件创建vue组件

<!-- App.vue -->
<template>
   <div>{{msg}}</div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'hello world'
    }
  }
}
</script>
<style>
  div {
    color: red;
  }
</style>

引入组件,并将组件渲染到页面

// app.js
import Vue from 'vue'
import App from './App.vue'

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

路由配置

1. npm install vue-router --save

    // app.js
    import Vue from 'vue'
    import App from './App.vue'
    
    import Login from './Login.vue'
    // 1. 引入vue-router
    import VueRouter from 'vue-router'
    
    // 2. 表示使用路由插件
    Vue.use(VueRouter)
    //3. 配置路由规则
    var router = new VueRouter({
      routes: [
        { name: 'login', path: '/login', component: Login }
      ]
    })
    
    new Vue({
      el: '#app',
      // 挂载路由
      router,
      // 这是个渲染函数，指定渲染组件
      render: h => h(App)
    })

当然你也可以使用vue-cli自动化构建工具搭建项目,更加的方便

vue-cli是官方的一个脚手架工具，所谓脚手架呢就是一个架子，什么架子呢？项目结构的架子，里面有一些最基本的结构配置。利用vue-cli呢，我们可以生成这样的一个脚手架，所以呢它就被称为vue脚手架工具。

npm install vue-cli -g

vue init webpack admin