webpack安装与打包js ｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第4天 1.什么是Webpack?

这是我参与「第四届青训营」笔记创作活动的第4天

1.什么是Webpack?

Webpack模块打包工具，它会分析模块之间的依赖关系，然后使用loaders处理它们，最后生成一个优化并合并后的静态资源。简单的说就是打包，压缩各种静态资源的工具

2.为什么使用Webpack

在之前我们都是用传统的方式去开发一个系统，html、css、js，就这些。开发完之后直接给后台人员去部署，当然这没什么问题。当我们的项目需求不断增加，代码也就越多，越不好维护，一个文件代码都上百甚至上千行，里面代码甚至都是重复的,还需要担心script标签依赖顺序问题，还需要担心代码变量污染问题，这时就出来了模块化，防止变量污染及依赖顺序问题，而现在主流打包工具就是Webpack，强大的社区支撑且支持Es Module、CommonJs、AMD规范。

3.优势

性能优化
减少浏览器像服务器的请求次数
节约服务器的带宽资源

4.如何使用Webpack？

(1)Webpack的环境搭建

Webpack是基于Nodejs,运行在Nodejs环境下

注：使用Webpack之前要先搭建node环境

(2) 全局安装Webpack

npm i -g webpack

(3) 在终端使用npm init 自动创建package.json文件

npm init -y   //加上-y就不用再一路回车这么麻烦了

(4) 安装Webpack

npm install webpack -D  //-D是装到开发依赖中

(5) 安装Webpack的依赖包

npm install

(6) 卸载webpack

npm uninstall webpack

(7) 下载指定版本的Webpack

//例如：下载3.6.0版本的webpack

  npm i webpack@3.6.0 -D

5.如何打包.js文件

第一先创建webpack的配置文件 webpack.config.js

module.exports={
    watch:true, //监听
    //入口文件
    entry:"./src/main.js",
    //出口文件
    output:{
        filename:"./dist/build.js"
    }
}

注：main.js文件是我们要打包的文件

build.js文件是我们打包后的输出文件

//main.js文件：

import jquery from "jquery";
import "./common/css/style.css";
import "./common/css/style.less"
jquery(function(){
    jquery("#box").css({
        width:300,
        height:200,
        background:"#f00"
    })
})

第二在package.json配置bulid

"scripts": {
    "build": webpack
},

第三引文件(注意要引打包后的build.js文件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网页的入口文件</title>
    <script src="../dist/build.js"></script>
</head>
<body>
    <div id="box"></div>
    <div class="temp">我是Y</div>
</body>
</html>

第四在终端执行npm run build

npm run build  //打包完成

webpack安装与打包js ｜ 青训营笔记