在自己喜欢的地方新建一个文件夹（需要先安装好node环境和npm，检查方式 node -v，npm -v，有版本号就是安装完成的）

1.2.1 安装webpack

  1. //初始化
  2. npm init
  3. package name:webpack-project （名字）
  4. //其他都可以回车跳过
  5. //初始化完成后 文件夹下会有一个package.json文件

image.png

  1. //安装wepback 和 webpack-cli
  2. npm i webpack webpack-cli -g 全局安装
  3. npm i webpack webpack-cli -D 开发环境安装

image.png
安装完成，项目文件夹下会多出一个node_moudules(依赖包) 和 package-lock.json(安装时的包的版本号)

1.2.2 认识环境配置

在根目录下新建一个src文件夹和build文件夹；
在src内新建index.js,在build文件夹内新建一个index.html;

  1. /*
  2.   index.js webpack入口文件
  3.   1.运行指令：
  4.     开发环境：webpack --entry ./src/index.js -o ./build --mode=development
  5.       webpack会以 .src/index.js 为入口文件开始打包，打包后输出到./build/built.js,
  6.       整体打包环境为开发环境
  7.     生产环境：webpack --entry ./src/index.js -o ./build --mode=production
  8. */
  9. function add(x,y){
  10.     return x + y
  11. }
  12. console.log(add(1,2));

运行开发环境的打包命令
image.png
打包成功 ——> build文件夹下内会多出一个main.js;
修改build文件夹内的index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7. </head>
  8. <body>
  9.   <!-- 引入 -->
  10.   <script src="./main.js"></script>
  11. </body>
  12. </html>

在游览器打开后可以看到：
image.png
成功输出3，这就是最基础的打包;

1.2.3 样式资源打包

在src下创建一个style.css文件，然后在index.js中引入
style.css:

  1. html,body{
  2.   background-color: red;
  3. }

index.js:

  1. /*
  2.   index.js webpack入口文件
  3.   1.运行指令：
  4.     开发环境：webpack --entry ./src/index.js -o ./build --mode=development
  5.       webpack会以 .src/index.js 为入口文件开始打包，打包后输出到./build,
  6.       整体打包环境为开发环境
  7.     生产环境：webpack --entry ./src/index.js -o ./build --mode=production
  8. */
  10. // 引入样式文件
  11. import './style.css';
  13. function add(x,y){
  14.     return x + y
  15. }
  16. console.log(add(1,2));

运行打包命令后：
image.png
它会报如上错误，这是因为我们没有配置解析样式的相关配置，webpack无法识别样式代码；
即：默认情况下，webpack只能处理js和json文件；

配置webpack.config.js

在根目录创建一个webpack.config.js

  1. /**
  2.  * webpack.config.js webpack的配置文件
  3.  *  作用：运行webpack时会加载其中的配置
  4.  *  默认common.js
  5.  */
  6. //webpack配置 -- 5个核心配置
  8. const path = require('path'); //node.js的一个管理路径模块;
  10. module.exports = {
  11.   //入口
  12.   entry: './src/index.js',
  13.   /**
  14.    * 输出
  15.    * filename:打包后的文件名，
  16.    * path:打包文件名
  17.   */
  18.   output:{
  19.     filename:'bundle.js',
  20.     //path.resolve();用来拼接绝对路径
  21.     //__dirname node.js的一个变量，代表wepback.config.js所在目录绝对路径
  22.     path:path.resolve(__dirname, 'dist')
  23.   },
  24.   //loader的配置
  25.   module:{
  26.     rules:[//详细的loader配置
  28.     ]
  29.   },
  30.   // plugins的配置
  31.   plugins:[],
  32.   //当前环境模式
  33.   mode:'development'
  34. }

配置loader

  1.  module:{
  2.     rules:[//详细的loader配置
  3.       {
  4.         // 匹配文件
  5.         test:/\.css$/,
  6.         //user:使用哪些loader,执行顺序从右到左，从下到上
  7.         //style-loader:创建style标签，将js中的样式资源插入，添加到head中生效
  8.         //css-loader:将css文件变成commonjs模块加载到js中，里面的内容是样式字符串;
  9.         use:['syle-loader','css-loader']
  10.       }
  11.     ]
  12.   },

安装对应的loader

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

运行打包命令wepback; //webpack 默认打包命令 等于 webpack build
image.png
可以看到打包成功，然后在dist文件夹内新建一个index.html文件,引入bundle.js文件；
image.png
样式文件引入成功;
其他一些loader可以查询wepback官网 ：地址

1.2.4 html资源打包

首先需要下载一个插件 html-webpack-plugin

  1. npm i html-webpack-plugin -D

配置plugins

在根目录新建一个public文件夹，创建一个index.html文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7. </head>
  8. <body>
  9. </body>
  10. </html>

配置webpack.config.js 

  1. output: {
  2.     filename: 'bundle.[hash].js',
  3.     //path.resolve();用来拼接绝对路径
  4.     //__dirname node.js的一个变量，代表wepback.config.js所在目录绝对路径
  5.     path: path.resolve(__dirname, 'dist')
  6.   },
  8. // plugins的配置
  9.   plugins: [
  10.     new HtmlWebpackPlugin({
  11.       template: './public/index.html',
  12.       filename: 'index.html',
  13.       hash: true, //true则将唯一的webpack编译哈希值附加到所有包含的脚本和CSS文件中。主要用于清除缓存,同时需要将output中的filename设置成bundle.[hash].js
  14.     })
  15.   ],

删除dist文件夹，运行打包命令：webpack；
image.png
打包成功，会自动生成dist文件，以及插入打包后的js文件；

1.2.5 打包图片资源

安装依赖包

  1. npm i file-loader url-loader html-loader -D

配置loader

  1. module: {
  2.     rules: [ //详细的loader配置
  3.       {
  4.         // 匹配文件
  5.         test: /\.css$/,
  6.         //user:使用哪些loader,执行顺序从右到左，从下到上
  7.         //style-loader:创建style标签，将js中的样式资源插入，添加到head中生效
  8.         //css-loader:将css文件变成commonjs模块加载到js中，里面的内容是样式字符串;
  9.         use: ['style-loader', 'css-loader']
  10.       },
  11.       //处理图片资源
  12.       {
  13.         test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
  14.         loader: 'url-loader',
  15.         options: {
  16.           esModule: false,
  17.           limit: 8 * 1024,
  18.           //[hash:10] hash前10位,[ext] 原来的扩展名
  19.           name:'[hash:10].[ext]',
  20.           //outputPath 打包后存放的路径
  21.           outputPath:'static'
  22.         }
  23.       },
  24.       //处理html中的img文件
  25.        {
  26.         test: /\.html$/,
  27.         loader:'html-loader',
  28.         options: {
  29.           esModule: false
  30.         }
  31.       }
  32.     ]
  33.   },

1.2.6 打包其他资源

打包除了js、css、html等以外文件

配置loader

//打包其他资源
{
  //exclude 为排除,排除上面配置过的
  exclude:/\.(css|js|html|png|jpe?g|gif|svg)(\?.*)?$/,
  loader:'file-loader,
  options: {
    name:'[hash:10].[ext]'
  }
}

1.2.7 配置开发服务器（devServer）

自动化编译，热更新
安装开发服务器依赖：npm i webpack-dev-server -D

var path = require('path');

module.exports = {
  //...
  devServer:{
    //运行代码目录
    contentBase: path.join(__dirname, 'dist'),
    //文件更改将触发整个页面重新加载
    watchContentBase: true,
    //启动压缩
    compress: true,
    //端口号
    port: 9000,
    //域名
    // host:'0.0.0.0',
    //热更新
    hot: true,
    //服务器启动后打开浏览器
    open:true,
  }
};

运行指令：webpack serve;

配置代理 （devServer.proxy）

 devServer:{
    //运行代码目录
    contentBase: path.join(__dirname, 'dist'),
    //文件更改将触发整个页面重新加载
    watchContentBase: true,
    //启动压缩
    compress: true,
    //端口号
    port: 9000,
    //域名
    // host:'0.0.0.0',
    //热更新
    hot: true,
    //服务器启动后打开浏览器
    open:true,
    // 代理
    proxy: {
      '/api': {
        target: 'http://localhost:3000',//例如 api/users 的请求会将请求代理到http://localhost:3000/api/users
        pathRewrite: { '^/api': '' },//api/users 的请求会将请求代理到 http://localhost:3000/users
        //默认情况下，将不接受在 HTTPS 上运行且证书无效的后端服务器,如果需要，可以这样修改配置:
        secure: false,
        //默认情况下，代理时会保留主机头的来源，可以将 changeOrigin 设置为 true 以覆盖此行为。
        changeOrigin: true,
      },
    },
  }