node+vue+webpack 集成 一

 

1: 初始化项目，使用 npm管理项目中的包

     命令-- npm init

2：运行webpack 入口文件路径 输出路径，对main.js 进行处理。 

     命令-- webpack src/main.js -o dist/bundle.js

3:使用webpack的配置文件简化打包时候的命令

     3.1:创建webpack.config.js

     代码：

// 导入处理路径的模块
    var path = require('path');

    // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        }
    }

    命令--  webpack  （代替 webpack src/main.js -o dist/bundle.js）

4：实现webpack的实时打包构建

1. 由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。
2. 运行npm i webpack-dev-server --save-dev安装到开发依赖
3. 安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中
4. 把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快
5. 这个时候访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index首页，此时引用不到bundle.js文件，需要修改index.html中script的src属性为:<script src="../bundle.js"></script>
6. 为了能在访问http://localhost:8080/的时候直接访问到index首页，可以使用--contentBase src指令来修改dev指令，指定启动的根目录：

7. "dev": "webpack-dev-server --contentBase src"
   
   

5：使用html-webpack-plugin插件配置启动页面,实现自动打开浏览器、热更新和配置浏览器的默认端口号

1. 运行npm i html-webpack-plugin --save-dev安装到开发依赖
2. 修改webpack.config.js配置文件如下

3.   // 导入处理路径的模块
       var path = require('path');
       // 导入自动生成HTMl文件的插件
       var htmlWebpackPlugin = require('html-webpack-plugin');
   
       module.exports = {
           entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
           output: { // 配置输出选项
               path: path.resolve(__dirname, 'dist'), // 配置输出的路径
               filename: 'bundle.js' // 配置输出的文件名
           },
           plugins:[ // 添加plugins节点配置插件
               new htmlWebpackPlugin({
                   template:path.resolve(__dirname, 'src/index.html'),//模板路径
                   filename:'index.html'//自动生成的HTML文件的名称
               })
           ]
       }
   

4. 修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新：
5. 命令：

   "dev": "webpack-dev-server --hot --port 4321 --open"