自己简单配置webpack

第一步

// 1.在新建文件夹中，npm init -y，生成package.json文件

// package.json  文件内容
{
  "name": "02webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

第二步

// 2. 新建dist 和 src 文件夹
// 在src 新建index.html index.css index.js 文件
// 3. 安包：npm i jquery -S
// 4. 在index.js中import $ from 'jquery' 或 const $ = require('jquery')

// 但是jquery没有被应用到页面上，接下来使用webpack

第三步 使用webpack

• 安包 npm install webpack webpack-cli -D

• 在package.json的script节点增加

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
  },

npm run dev 在dist生成main.js文件，然后在html中引入

第四步 解决mode警告

解决警告问题

新建webpack.config.js配置文件

// 注意：webpack.config.js 是 webpack 的配置文件；webpack是基于node开发的
// webpack 在运行和打包的时候，会优先读取这个配置文件中，导出的配置对象；
module.exports = {
  // 注意：在 webpack 的配置文件中， mode 选项是必须要有的；
  mode: 'development', //  development    production
}

第五步 安装和配置webpack-dev-server实现实时打包和编译

1. 借助于 webpack-dev-sever 这个工具，能够实现 webpack 的实时打包构建；

2. 运行npm i webpack-dev-server -D 安装包

3. 打开package.json文件，把 scripts 节点下的 dev 脚本，修改为如下配置：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },

1. 4. 修改 index.html 文件中的 script 的 src, 让 src 指向 内存中根目录下的 /main.js（虚拟的js文件）

   <script src="/main.js"></script>

1. npm run dev 在服务器端打开即可

第六步 安装html-webpack-plugin插件

因为第五步以后，是直接显示的项目根目录，现在要显示src/index.html文件，那么久需要配置包：

1. 装包npm i html-webpack-plugin -D

2. 在 webpack.config.js中，导入 插件：

// 导入 html-webpack-plugin，从而帮我们自动把 打包好的 main.js 注入到 index.html 页面中
// 同时，html-webpack-plugin 可以把 磁盘上的 index.html 页面，复制一份并托管到 内存中；
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
  // 传递一个配置对象
  template: './src/index.html', // 指定路径，表示 要根据哪个物理磁盘上的页面，生成内存中的页面
  filename: 'index.html' // 指定，内存中生成的页面的名称
})

　　3. 把 创建好的 htmlPlugin 对象，挂载到 plugins数组中：

// webpack 这个构建工具，是基于 Node.js 开发出来的一个前端工具
module.exports = {
  mode: 'development', // 当前处于开发模式
  plugins: [htmlPlugin] // 插件数组
}

第七步 实现自动打开浏览器、热更新和配置浏览器的默认端口号

打开package.json文件，把 scripts 节点下的 dev 脚本

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 80 --hot --compress"
  },

• --open 自动打开浏览器

• --host 配置IP地址

• --port 配置 端口号

• --hot 热更新；最新的代码，以打补丁的形式，替换到页面上，加快编译的速度；

• --progress 展示编译的进度

• --compress 对网络中传输的文件进行压缩，提高传输效率；

第八步 打包处理非js文件

.css文件

webpack 只能编译处理.js结尾的文件，别的文件处理不了，这时需要第三方loader插件帮助

1. 运行 npm i style-loader css-loader -D

2. 打开 webpack.config.js 配置文件，在 module -> rules 数组中，新增处理 css 样式表的loader规则：

3. 

   module: { // 所有 非.js 结尾的第三方文件类型，都可以在 module 节点中进行配置
       rules: [ // rules 是匹配规则，如果 webpack 在打包项目的时候，发现，某些 文件的后缀名是 非 .js 结尾的
         //  webpack 默认处理不了，此时，webpack 查找 配置文件中的 module -> rules 规则数组；
         { test: /\.css$/, use: ['style-loader', 'css-loader'] }
       ]
     }

   在js中：import './css/01.css'

.less文件

1. 运行 npm i less-loader less -D

2. 在 webpack 的配置文件中，新增一个 rules 规则来 处理 less 文件：

处理css中的路径

1. 运行 npm i url-loader file-loader -D

2. 在 webpack 的配置文件中，新增一个 rules 规则来 处理 图片 文件：

   小于7631字节 才会转换为base64

使用babel处理高级JS语法

1. webpack 默认能够打包处理一些ES6中的高级语法；但是，webpack 并不能处理所有的高级ES6、ES7语法；

2. 运行两套命令，去安装相关的 loader:

   • 运行 npm i babel-core babel-loader babel-plugin-transform-runtime -D

   • 运行 npm i babel-preset-env babel-preset-stage-0 -D

3. 添加 babel-loader 配置项：

// 注意：在配置 babel-loader 的时候，一定要添加 exclude 排除项，把 node_modules 目录排除
// 这样，只让 babel-loader 转换 程序员 自己手写的 JS 代码；
// 好处：1. 能够提高编译的转换效率； 2. 能够防止不必要的报错！
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

　　4. 在项目根目录中，添加 .babelrc 配置文件：

{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime"]
}