一步一步使用webpack搭建项目

MPA |-src
|-main.js 项目打包的入口文件
|-App.vue 项目的根组件(项目一启动,见到的第一个页面)
|-package.json 项目的描述文件,用于记录安装了哪些包
|-webpack.config.dev.js 开发阶段webpack的配置文件

切换到根目录,使用 npm init -y 生成package.json

 tips:vue项目跟react项目目录结构基本一致

二:

webpack-dev-server & webpack的区别

webpack-dev-server :【内部开启了一个node服务】
    开发阶段使用,它是在webpack基础上又封装了一把,webpack有的功能它都有,并且
    还拓展了一些,打包生成的bundle.js及index.html都是发布到它内部开启的node服务
    上面去了
    
webpack:生产阶段,它是在整个项目做完了之后,接下来,打包生成可以上线的
静态资源

 注意:webpack的版本和webpack-dev-server的版本是需要对应的,否则会报错

            webpack 3.x版本  对应  webpack-dev-server2.x

            webpack 4.x版本  对应  webpack-dev-server3.x

 三:

package.json 和 package-lock.json 作用分析

1.package.json 文件里记录有项目所安装的依赖项,当 node_modules 被删除时,可以再根据该文件安装所需的依赖项;

2.npm 5 以前不会有 package-lock.json 这个文件,npm5 之后才加入这个文件;

3.当安装包的时候,npm 都会生成或者更新  package-lock.json 这个文件;

4.npm 5 之后的版本安装包的时候不需要加 --save 参数,它会自动保存依赖的信息;

5.当安装包的时候,会自动创建或者更新 package-lock.json 文件;

6.package-lock.json 文件会保存 node_modules 中所有包的信息(版本、下载地址),重新 npm install 的时候速度会提升;

7.文件的名称有 lock ,表示该文件可以用来锁定版本号,防止自动升级新版。

 四:

使用 webpack-dev-server 和 html-webpack-plugin 运行我们的项目

html-webpack-plugin
    以一个参考文件为模版,生成index.html,并且会自动发布到webpack-dev-server开启的node
    服务上面去
    
    参考:https://github.com/jantimon/html-webpack-plugin
    
    步骤:
        1、在根目录下面,创建一个template.html,里面写上id=app的div
        
        2、在webpack.config.dev.js中的plugins中写代码
        
webpack-dev-server
    放在package.json中的scripts中去
    
    webpack-dev-server --progress --config webpack.config.dev.js --port 6008 --open --hot
    
    --port 指定node服务运行的端口号
    --open 把我们项目运行在浏览器中,并且自动打开浏览器
    --hot 实现热重载/热替换/热更新/热加载
    
最终运行,切换到根目录,运行 npm run dev

 五:

第一次安装
    包:vue
    应用场景:我们要去运行App.vue
    安装方式:npm i vue -S
    
第二次安装
    包:vue-loader vue-template-compiler css-loader style-loader
    应用场景:我们要打包.vue结尾的文件
    安装方式:npm i vue-loader vue-template-compiler css-loader style-loader -D
    
第三次安装
    包:html-webpack-plugin webpack@3.11.0 webapck-dev-server@2.11.1
    应用场景:我们到时候运行打包出来的bundle.js
    安装方式:npm i html-webpack-plugin webpack@3.11.0 webpack-dev-server@2.11.2 -D

 

posted @ 2019-07-02 07:50  Fanyee  阅读(342)  评论(0编辑  收藏  举报