webpack 配置 vue 的单页面应用

最新推荐文章于 2024-09-12 16:43:23 发布

小米粒_

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量241

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_37448301/article/details/113494027

版权

一、什么是 webpack？

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

二、为什么使用 webpack?

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

三、安装

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

四、用 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"
  }
}