webpack基本使用步骤

1. webpack概述

webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web开发中面临的困境；webpack提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等功能；

2. webpack基本使用

1. 实现隔行变色效果：
   在项目文件夹下面初始化npm init -y;然后创建文件夹src:
   
   然后安装npm install jQuery -S
   然后在index.html文件中写入ul li结构，在index.js中写入；

import $ from 'jQuery';
$(function() {
    $("li:odd").css("background", "cyan");
    $("li:even").css("background", "yellow");
})

但是这个时候index.html的ul li并不会隔行显示不同颜色，需要webpack去解决浏览器兼容性问题，import输入ES6内容；
报错：

在当前目录下安装webpack:

  npm install webpack webpack-cli -D

在当前目录下创建webpack.config.js文件然后内容为：development表示当前为开发坏境；

// const { Module } = require("webpack");
module.exports = {
    mode: "development"
}

然后更改目录文件下的package.json里面的

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

命名终端输入npm run dev,生成了dist文件夹，然后把dist文件夹下面的main.js引入到index.html文件中，但是在npm run dev周报错了，但是效果又实现了：


参考文章解决之前安装的是npm install jQuery -S,这里重新安装npm install jquery -S 然后再npm run dev就成功了：

3. webpack设置打包入口出口

webpack 4.x版本默认.src/index.js是入口文件 dist/main.js是出口文件；
在webpack.config.js中写入代码：

// const { Module } = require("webpack");
const path = require("path");
module.exports = {
    mode: "development",
    entry: path.join(__dirname, "./src/index.js"), //入口文件
    output: {
        path: path.join(__dirname, "./dist"),
        filename: "res.js",
    }
}

然后npm run dev在dist文件夹下面会生成res.js文件，然后将res.js引入到src文件夹下面的index.html文件中能实现隔行变色效果；

4. webpack自动打包

在更改入口.js文件的时候需要手动重新允许npm run dev命令重新打包才能生出改动后的新出口文件；现在安装一个自动打包功能的包webpack-dev-server可以更改入口文件内容之后自动更新出口文件；
安装：npm install webpack-dev-server
更改package.json文件中的：

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

然后在index.html里面修改：

    <script scr="/res.js"></script>

运行npm run dev的时候又报错了嘿嘿

据说是因为webpack-cli和webpack-dev-server版本不兼容：
使用下面方法解决：


虽然这里可以了，但是页面没有显示隔行显色， 渲染失败，但是那个bundle.js文件的确是在http://localhost:8080/下面的；

5. 上面的步骤出现了问题所以重新开始

打算重新开始重新建立新的文件夹试试：

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
2. npm install --save @babel/polyfill
3. 设置babel.config.js

const presets = [
    ["@babel/env", {
        targets: {
            edge: "17",
            firefox: "60",
            chrome: "67",
            safari: "11.1"
        }
    }]
]
module.exports = { presets }

4. npm init -y 这个时候文件夹名称不能和要安装的包一样不然后面会出错
5. 创建src文件夹然后在下面创建index.html、index.js文件，然后npm install jquery -S
6. 安装webpack webpack-cli这里指定webpack-cli版本

npm install webpack -D
npm install --save-dev webpack-cli@3.3.12

7. 开始打包npm run dev
   把生成的dist下面的index.js引入到src下面的index.html文件中,打开.html文件效果实现
8. 配置入口/出口js文件：在webpack.config.js里面写:

const path = require("path");

module.exports = {
    mode: "development",
    entry: path.join(__dirname, "./src/index.js"),
    output: {
        path: path.join(__dirname, "./dist"),
        filename: "bundle.js"
    }
}

9. 配置自动打包，npm install webpack-dev-server -D 之后npm run dev成功 ,在src下面的index.html文件引入bundle.js:<script src="/bundle.js"></script>
   
   

然后只要更改index.js文件，保存就能更新页面效果

10. 继续上面的步骤完成预览页面，而不是手动点击链接然后进入src文件夹；配置完成后点击链接自动出现页面不再需要点击src文件夹；

npm install html-webpack-plugin -D
//修改webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebpackPlugin({
                //设置生成预览页面的模板文件
                template:"./src/index.html",
                //设置生成的预览页面名称
                filename:"index.html"
            })
//继续修改webpack.config.js文件，添加plugins信息：
 module.exports = {
                ......
                plugins:[ htmlPlugin ]
            }
//在package.json中修改如下内容可以实现自动打开页面
 "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"

6. webpack中的加载器loader协助webpack打包

默认情况webpack只能打包js文件，所以想要打包非js文件需要loader加载器才行，loader加载器包含：

less-loader
sass-loader
url-loader//打包处理css中与url路径有关的文件
babel-loader//处理高级js语法的加载器
postcss-loader
css-loader style-loader

1.loader打包css文件

在上面的webpack_test文件下的src里面新建css文件夹，然后在这里面新建css文件，文件夹目录关系如下：

然后在01.css文件写样式，并且导入到index.js中`import "./css/01.css"但是由于还没有安装loader所以报错了：

2. 开始配置loader

1. 首先安装npm install style-loader css-loader -D
2. 配置规则：更改webpack.config.js的module中的rules数组

module.export={
module: {
        rules: [
        //user表示该文件类型需要调用的loader
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, 
        ]
    }
    }

效果如下：li前面的小圆点已经去掉；test表示匹配的文件类型，user表示要对应调用的loader，user数组中指定的loader顺序固定，多个loader调用顺序从后往前调用；

3. 打包less文件

1. 步骤和上面打包css文件类似先是安装npm install less-loader less -D
2. 然后配置webpack.config.js中的module的rules数组：增加如下内容

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

4. 打包scss文件（和less文件一样是预处理css）

1. 安装npm install sass-loader node-sass -D
2. 配置：

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

3. 完了之后要在index.js文件中导入才行，上面的也一样

import $ from "jquery";
import "./css/01.css";
import "./css/01.less";
import "./css/01.scss";

5. 配置postCSS 自动添加css兼容前缀

1. 安装npm install postcss-loader autoprefixer -D
2. 需要在根目录下新建postcss.config.js文件并且在这个文件中写入：

const autoprefixer = ("autoprefixer");
module.exports = {
    plugins: [autoprefixer],
}

3. 然后去webpack.config.js里面更改之前的rules规则：

{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
//user表示该文件类型需要调用的loader

6. 打包样式表中的图片

1. 安装npm install url-loader file-loader -D
2. webpack.config.js中配置：

{
    test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
    use: "url-loader?limit=16940"
}

7. 打包高级js语法

1. 安装：

npm install babel-loader @babel/core @babel/runtime -D
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

2. 配置，在根目录下创建babel.config.js并写入内容

module.exports = {
    presets: ["@babel/preset-env"],
    plugins: ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]
}

3.在webpack.confin.js文件中配置规则

{
                test:/\.js$/,
                use:"babel-loader",
                //exclude为排除项，意思是不要处理node_modules中的js文件
                exclude:/node_modules/
            }