用 webpack 配置 vue 的单页面应用

1、什么是 webpack？

webpack 是基于 Node.js 静态资源的模块打包器。当用 webpack 打包时，它会从一个起点开始查找各个模块依赖关系，而且按照这些依赖关系把这些文件打成一个或者多个包；

2、为何使用 webpack?

1.模块化，浏览器端的早期没有模块化，须要 js 文件只能经过 script 标签手动控制依赖管理这些 js 文件的引入顺序；而 webpack 能够经过模块化管理这些依赖； 2.自动编译 less、sass
3.能够把基于 JS 的扩展语言编译成 JS；
4.开发时配置代理解决开发环境跨域

3、安装

前提条件：在开始以前，请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。使用旧版本，你可能遇到各类问题，由于它们可能缺乏 webpack 功能以及/或者缺乏相关 package 包。

推荐本地安装

对于大多数项目建议本地安装。这可使咱们在引入破坏式变动(breaking change)的依赖时，更容易分别升级项目。一般，webpack 经过运行一个或多个 npm scripts，会在本地 node_modules 目录中查找安装的 webpack：

1. 建立 wbp-vue 项目目录（能够根据项目起名）

2. 在 wbp-vue 中生成 package.json

npm init -y
复制代码

3. 在 wbp-vue 中安装 webpack

npm install --save-dev webpack
复制代码

4. 在 wbp-vue 中安装 webpack-cli（若是你使用 webpack 4+ 版本，你还须要安装 CLI。）

npm install --save-dev webpack-cli
复制代码

4、用 webpack 配置 vue 的单页面应用

真实项目中咱们不是单独使用 vue，而是结合 webpack等打包工具；由于 webpack 能够更方便的实现模块化，导入导出依赖。并且使用webpack配合 vue-loader，咱们的组件能够写成 .vue 的文件。

• 在 wbp-vue 中建立 src 目录（src 存放打包前源文件）
  • src 中建立 index.html
  • src 中建立 main.js（主入口文件）
  • src 中建立 components (components 存放 vue 组件)
• 在 wbp-vue 中建立 webpack.config.js

1. 在 webpack.config.js 中配置以下：

let HtmlWebpackPlugin = require('html-webpack-plugin'); // 打包时用一下

// Vue + webpack 单页面应用须要安装： vue-loader  vue-template-compiler
let VueLoaderPlugin = require('vue-loader/lib/plugin'); // 引入 vue-loader plugin

module.exports = {
    entry: './src/main.js', // 配置打包入口
    output: {
        path: __dirname + './dist', // 通常输出目录都叫 dist 或者 build
        filename: 'bundle.js' // 打包输出的文件名
    },
    devtool: 'eval-source-map', 
    devServer: {
        contentBase: './src',
        port: 8001,
        open: true, // 自动启动浏览器
        inline: true, // 文件内容修改，浏览器自动刷新
        historyApiFallback: true, // 单页面应用切路由不刷新（history模式）
        proxy: {
          'api': {
              target: 'http://localhost:8000', // 和服务端同事联调时，你须要和服务端同事要开飞机的 ip 或者域名（再次确认端口，域名有可能不是用的80或443）
              changeOrigin: true, // target是域名的话，要设置为true
              secure: false // 不校验安全与否
          }
        }
    },

    // 配置 loader 
    module: {
        rules: [
            { // 配置 babel (把 ES67 转 ES5 ， 把 JSX 转 JS)
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                },
                exclude: /node_modules/ // 不处理 node_modules 中的东西
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|jpg|gif|woff|ttf)$/,
                use: 'url-loader'
            },
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ]
    },

    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html'
      }),
      new VueLoaderPlugin() // 除了上面配置 loader，这里还要用一个插件
    ]
};

复制代码

2. 配置时须要安装

npm install --save vue
    npm install --save vue-router
    npm install --save-dev webpack-dev-server 
    npm install --save-dev babel-core babel-loader@7.1.5 babel-preset-env
    npm install --save-dev css-loader style-loader
    npm install --save-dev less less-loader
    npm install --save-dev url-loader
    npm install --save-dev html-webpack-plugin
    npm install --save-dev vue-loader vue-template-compiler
复制代码

3. 须要在 package.json 中的 scripts 对象中配置

• "dev": "webpack-dev-server"
• "build": "webpack",
• "cmdBuild": "webpack-cli --entry ./app/main.js --output ./public/bundle.js",

{
  "name": "wbp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack", // 须要配置
    "cmdBuild": "webpack-cli --entry ./app/main.js --output ./public/bundle.js", // 须要配置
    "dev": "webpack-dev-server" // 须要配置
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.10",
    "vue-router": "^3.1.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "style-loader": "^1.0.0",
    "url-loader": "^2.1.0",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  }
}

复制代码

npm run dev 在命令行中执行就能够跑起来了

npm run build 在命令行中执行就能够打包了

注意：修改webpack配置文件后若是是开发中，要重启 npm run dev ;若是生产环境，要从新打包