JackWong992 / article

慢慢来,其实会很快
http://www.feelone.top/article/
2 stars 0 forks source link

The way to the font end:从认识webpack(3.x)开始 #4

Open JackWong992 opened 6 years ago

JackWong992 commented 6 years ago

一张图了解webpack

前端为什么需要webpack?

因为三大框架:react,vue,nodeJs都需要,所以需要;同时,webpack也是你从小白到工程师的跳跃。

什么是webpack?

webpack顾名思义,叫做模块打包机

安装webpack

  1. 安装node(命令行输入node -v 出现版本号,确认安装成功)
  2. npm install -g webpack (全局安装webpack,输入webpack -v确认安装成功) 注意:官方不推荐使用全局安装,可能别的部门版本不一致影响结果。 解决方法: 进入到你的webpack安装包>npm init>(可以输入,也可以不输入)>yes 这是会生成一个package.json的配置文件
  3. 建立生产环境:npm install --save-dev webpack ps:如果安装的过程中较慢,可能是网速或者node版本不对。推荐使用淘宝镜像:cnpm.taobao.org 如果webpack版本过老或者依赖包过老: 1.删除node_modules 2. npm install --save-dev webpack 如果是老旧的文件,里面已经有依赖包:
  4. package.json > "webpack: "xxx" 修改为最新版本 2. 删除node_modules 3. npm install (webpack更新,依赖包更新)

    开始一个简单的demo吧

    1.建立两个文件夹:src 和 dist,src主要是平时写代码,工作环境 dist主要是提交给组长的地方,生产环境

  5. dist文件下,写一个模拟的文件:index.html,代码如下:
    <div id="title"></div>
    <script src="./bundle.js"></script>

    src文件夹下,写一个entery.js文件,具体代码如下:

    document.getElementById('title').innerHTML="hello world!";

    在终端输入:webpack src/entery.js dist/bundle.js 打开本地服务器:http-server -c-1 打开 > index.html文件:hello world 这里的bundle.js是一个生成文件,上述就是一个简单的webpack模拟的打包过程。


第二章:插件与配置

入口和出口


打包压缩HTML文件

首先删除dist文件夹下的代码信息,这是用于生产环境。 在webpack-config.js文件下,引入html-webpack-plugin插件:const htmlPlugins= require('html-webpack-plugin'); 然后引入npm安装包:npm install --save-dev html-webpack-plugin 最后在webpack.config.js 里的plugin里进行插件配置:

new htmlPlugin({
    minify: {
        removeAttributeQuotes: true
   },
    hash: true,
    template: './src/index.html'
})

总结:html文件的打包可以有效的区分开发目录和生产目录,在webpack的配置中也要搞清楚哪些配置用于生产环境,哪些配置用于开发环境,避免两种环境的配置冲突。