Skip to main content

项目模块化开发

1、webpack构建工具（模块化）#

Vue的基本特点就是使用单文件完成；我们使用.vue来写那么我们必须需要使用构建工具；这里我选择使用webpack,通过webpack的loader和plugin来打包编译vue,js,css,scss,img等资源

1.1、安装webpack#

本地安装webpack为开发依赖 了解更多webpack基本使用

npm install webpack webpack-cli --save-dev

1.2、创建文件目录#

创建webpack需要的文件目录规则

jiaahui-ui  |- package.json  |- package-lock.json  |- README.md  |- node_modules  |- .gitignore  |- LICENSE+ |- /lib                 # 打包生产环境代码输出目录+ |- /dist                # webpack默认打包后文件输出目录+ |- /src                 # 源代码目录+   |- index.js           # webpack默认打包入口文件+   |- index.html         # webpack打包时要用的模板+ |- webpack.dev.js       # webpack开发环境配置文件+ |- webpack.prod.js      # webpack生产环境配置文件+ |- webpack.common.js    # webpack公共配置文件

2、初始化文件内容#

2.1、初始化默认打包入口文件#

/src/index.js 
import Vue from "vue"new Vue({    el: "#app",    data:{      msg:"你好"    }})

2.2、初始化打包时要用的模板文件#

/src/index.html
<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>造轮子预览</title></head>
<body>    <div id="app">        {{msg}}    </div></body>
</html>

2.3、初始化webpack通用打包配置#

webpack.common.js 
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动打包 /src/index.html文件到dist目录插件
module.exports = {  entry: {    //入口文件位置    app: './src/index.js',  },  plugins: [    new HtmlWebpackPlugin({      //复制'./src/index.html'文件，并自动引入打包输出的资源文件（js/css）      template:'./src/index.html',    }),  ],  output: {    filename: '[name].bundle.js',    path: path.resolve(__dirname, 'dist'),    clean: true,  },  resolve: {        alias: {            'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式  vue结尾的        }  }};

运行该命令安装插件 npm i -D html-webpack-plugin 了解更多webpack通用配置

2.4、初始化webpack开发打包配置#

webpack.dev.js 
const { merge } = require('webpack-merge'); const common = require('./webpack.common.js');
 module.exports = merge(common, {   mode: 'development', });

运行该命令安装插件 npm install --save-dev webpack-merge 了解更多webpack开发环境配置

2.5、初始化webpack生产打包配置#

webpack.prod.js 
const { merge } = require('webpack-merge'); const common = require('./webpack.common.js');
 module.exports = merge(common, {   mode: 'development', });

配置开发环境配置文件的时候安装了 webpack-merge的化这里就不用安装了了解更多webpack生产环境配置

3、配置npm script运行webpack脚本#

3.1、配置脚本#

package.json
"scripts": {      "start": "webpack --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"  },

3.2、运行脚本打包发布#

#开发环境构建npm run start#生产环境构建npm run build
important

此时我们运行 npm run start 后会在dist文件夹下生成app.bundle.js文件和index.html文件，并且index.html中自动引入了app.bundle.js文件，此时我们可以打开index.html文件进行预览

4、开发环境配置热更新#

日常开发中我们写了一些功能后就像运行预览一下，但是每次都需要自己手动运行打包命令然后刷新浏览器,这样是机械又毫无意义的重复工作，因此我们就来配置webpack的本地热更新服务运行一次后自动编译打包，打开浏览器，当我们修改后自动更新

4.1、安装webpack-dev-server#

npm i -D webpack-dev-server

4.2、配置devServer#

webpack.dev.js 
  |-   const { merge } = require('webpack-merge');  |-   const common = require('./webpack.common.js');  |-   module.exports = merge(common, {  |-     mode: 'development',+ |-     devServer:{+ |-       //自动运行项目目录（构建后的目录）+ |-       contentBase:path.resolve(__dirname, 'dist'),+ |-       //启动gzip压缩（让代码体积更小速度更快）+ |-       compress:true,+ |-       //指定运行的端口号+ |-       port:3000,+ |-       //打开默认浏览器+ |-       open:true+ |-     }  |-  });

4.3、配置devServer的npm脚本#

package.json npm run dev运行脚本
"scripts": {     "dev": "webpack serve --open --config webpack.dev.js",     "build": "webpack --config webpack.prod.js"    },
文章目录