webpack基本使用及基本配置

什么是webpack?

webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；它可以看作是一个模块打包机，通过一个入口主文件，找到与其相关所有的文件，将这些文件编译打包成浏览器可以识别的语言（vue，ts，less，es6一些高级语法等等）；它可以完美实现资源的合并、打包、压缩（包括将图片转换为base64）、混淆等诸多功能。

1. 安装webpack流程

进入项目根目录 npm init
之后，文件夹下会有一个文件，叫做package.json

{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

这个文件内容就是项目或node包的一些信息，这里面我们可以增加一些信息

{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {},
"author": "Q",
"license": "ISC"
}

2. webpack安装的两种方式

• 全局安装
  npm i webpack -g
• 项目内安装webpack
  npm i webpack --save-dev

安装好了之后，项目会多出一个文件，叫做node_modules。
npx webpack -v

npm init -y (这个时候不会再询问那些问题，默认生产)
npm info webpack (可以找到所有版本信息)
npm install webpack@4.25.0 webpack-cli -D (指定版本安装)

2.建立练习项目

在这里项目中，创建了图中的相关文件目录，主要的用途如下：

• dist ：用于构建生存压缩文件，例如 bundle.js 等压缩文件。
• src : 用于存放开发源代码文件
  • css ： 用于存放源代码css文件
  • images：用于存放源图片文件
  • js： 用于存放源 js 文件
  • index.html: 源html文件
  • main.js ： 入口js文件

建立好文档结构之后，在根目录下初始化package.json文件，执行：
npm init -y

3. 在index.html编写 li 标签，稍后在 main.js 编写样式

4. main.js 中通过import引入一个js文件，并且编写样式（浏览器是不会识别import的）

5. app.js 用来修改样式

做完以上操作；打开页面，发现报错，因为import *** from *** 是ES6中导入模块的方式 由于 ES6的代码，太高级了，浏览器解析不了，所以，这一行执行会报错；

那怎么办呢？可以使用webpack进行压缩转化为浏览器可以执行的js文件。

6.创建webpack的配置文件 webpack.config.js，如下：

下面再来执行webpack打包

发现打包成功了，然后我们把打包的文件将main.js替换掉后，效果就出来了