webpack打包工具的基础和使用

一、什么是webpack

是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

01 安装webpack开发环境

安装可以参考一网站。http://www.mamicode.com/info-detail-2271147.html

重新安装过程中报错一定要加sudo

先去官网下载node.js

npm一般运行起来都很慢，可以用淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org，

后面的npm改成cnpm再运行，就快很多啦

查看node是否安装的两个命令： npm -v      node  -v

在mac环境下安装的命令： sudo npm install webpack -g

进行全局安装，然后会弹出一个输入框输入密码。我的密码是四位通用。

查看webpack的版本：webpack -v 

这里会询问我们安装webpack-cli还是webpack-command.选择第一个。但是命令会提示安装不成功。

解决办法：sudo npm install web pack-cli -g

然后你再输入命令webpack -v 会显示你电脑上安装的版本号。

【

    如果你安装了低版本的webpack，想安装一个新版本，操作如下：

    npm -g install web pack -->卸载webpack

    sudo nom -g I webpack  --> 全局安装webpack 

    npm install webpack --save-dev

    sudo nom install webpack-cli -g 

】

对于一个项目

1.创建一个项目文件夹： mkdir wpk-test 然后进入该文件夹下

2.初始化npm: npm init -y

项目下多了一个package.json文件

3.安装webpack :$ npm install -D webpack (这是局部安装，如果要在全局安装，把D改成g即可)

cnpm view webpack versions ：查看webpack所有版本，安装的时候可以指定安装版本

cnpm install webpack -D

cnpm install webpack-cli -D

4、查看webpack的版本,这里会提示我们安装webpack-cli,这是因为 webpack 在 webpack 4 里将命令行相关的都迁移至 webpack-cli 包

5.打包操作你可以在终端实现，也可以在vscode中使用快捷键command+shift+y打开终端

在项目下创建src文件夹，里面创建index.js ,因为webpack4.x是以项目根目录下的./src/index.js作为入口，所以我们要新建src目录且把index.js放在src下

webpack4.x的打包已经不能用webpack 文件a 文件b的方式，而是直接运行webpack --mode development或者webpack --mode production，这样便会默认进行打包，入口文件是‘./src/index.js‘，输出路径是‘./dist/main.js‘，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成

把所有的源码html, css,js都放在src文件夹下，dist文件是打包自动生成的。index.html放在项目的根目录下，跟dist和src一级。

在index.html中script标签路径需要进行设置为../dist/main.js

6.在package.json中下增加"dev" : "webpack --mode development " ，这样后面就可以直接用npm run dev来执行打包

二。? 处理CSS文件