@TOC

前言

一、介绍

1.安装脚手架

2.这个去掉 重新安装会保留版本

3、全局的server安装

• npm install -g serve
• serve -s bulid
• npm run build 打包
• serve -s build 这样 就可调试生产环境代码

4、serviceWorker

5、开发环境下代码调试设置

默认情况 浏览器代码无法调试

6、生产环境下代码调试

- 注意常规情况 生产环境 不允许 可调试 不安全

二、先学习 webpack

1.webpack 配置打包后的文件

• 当然前提是安装node
• 这些 不重要 流程化的东西 代码逻辑和业务逻辑才是最重要的

2.给别人或者打包 删掉node-modules

• 只需要 保留 package.json 里面的 devDependencies 就可
• 别人 拿到之后 直接 npm install 就可 下载对应的 node_modules

3、 配置 package.json文件

• "build": "webpack --config webpack.config.js",
• 

4、新建 webpack.config.js 并且配置

// webpack 是 node 写出来的  使用node语言

// 路径
const path = require('path');
module.exports = {
    entry: '/src/index.js', // 入口文件
    output: {
        filename: 'bundle.js', // 打包后的文件名
        path: path.resolve('dist') // 路径必须是一个绝对路径
    }
}

• 测试一下 这个path.resolve('dist') 到底是什么
• 
• npm run build 可以 打包 生产 dist 文件夹 并且将打包的内容 放到 dist 下面 （当然 dist 名字可以更改 只是常规习惯使用 dist 作为名字 ）
• 
• 

四、webpack-dev-server

1、安装和配置

devServer: {
        port: 8080, // 端口号 可以随便起大一些 没有使用就行
        host: "localhost", // ip地址 localhost本地 0.0.0.0可访问网络地址
        progress: true, // 开启进度条
        contentBase: "./dist", // 默认打开的目录
        open: true, // 自动打开浏览器
        compress: true // 启动gzip压缩
    }

2、proxy解决跨域问题 重要！！！ 面试

// 跨域代理
        proxy: {
            '/api': {
                target: 'http://10.0.193.147:8080',
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    '^/api': '' //需要rewrite的
                }
            }
        }

• 拼接 url

3、HTML 模版插件

• 为啥需要这个东西 ？
• 有了 html 模版插件 就可 写 html 的 内容 多快乐
• 
• 手残 需要注意 下面两个文件 可见 需要配置

// 插件 写在这里
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html",
    }),
  ],

• npm run dev 启动服务
• 但是需要特别注意一件事情 plugins 不能写成 plugin
• 当然 需要 新建 public ---> index.html 文件 写点东西
• 

4、多页面配置 （MPA） 配置 重要！！！ 面试

1、 在 webpack.config.js里面设置

• 变成 多个入口

// 多入口
  entry: {
    index: "./src/index.js", // 入口文件
    admin: "./src/admin.js",
  },
 

• 注意filename 和 publicPath

 output: {
    filename: "[name].js", // 打包后的文件名
    path: path.resolve("dist"), // 路径必须是一个绝对路径
    publicPath: "/",    // build 之后的公共路径
  },

2、配置 plugins chunks

// 插件 写在这里
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "index.html",
            chunks: ['index']
        }),
        new HtmlWebpackPlugin({
            template: "./public/admin.html",
            filename: "admin.html",
            chunks: ['admin']
        }),
    ],

• 当然 两个前提 需要注意
• 1） src 文件夹下面 需要 有 index.js 和 admin.js
• 2） public 文件夹下面 需要有 index.html 和 admin.html
• 然后 npm run build
• 打包内容 在 dist 文件夹下面

3、有个需求 文件需要放在/demo 作为根目录 重要！！！ 工作使用多 1、

2、修改 publicPath

3、 4、 因为之前 安装过 serve

• cd dist
• serve 启动 dist 服务

5、loader

1、loader 配置 加载css

• 

• 

const HtmlWebpackPlugin = require("html-webpack-plugin");

new MiniCssExtractPlugin({
      filename: "static/css/main.css",
    }),

• 

// 模块 规则
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
          },
        ],
      },
    ],
  },

2、 常规 会在 assets 中写静态的东西

• 那么 我怎么 在 index.html使用这几个东西？？？
• 当然 你可以说直接 link 引入吧
• 这样很不好
• 我们想在 js 中完成引入 html 文件 不更改 怎么做呢
• 做之前 把 这个恢复一下
• 
• public.css 和 index.css 写点东西 就可展示
• require和 import 都可 常用import
• 

3、 那我怎么将 public.css 样式 引入到 index.css里面呢 ？

• 

• 

• 

6、post-css 处理 css 兼容性

1、

2、 webpack.config.js 里面引入

// post-css 处理css兼容性
const postCss = require("autoprefixer")({
  overrideBrowserslist: [
    "last 10 Chrome versions",
    "last 5 Firefox versions",
    "Safari >= 6",
    "ie > 8",
  ],
});

3、

{
            // 处理css兼容性
            loader: "postcss-loader",
            options: {
              plugins: [postCss],
            },
          },

7、css和js压缩

1、压缩css

• 安装
• 引入 配置一下 特别注意这个地方容易写错 optimization是个对象 minimizer也是对象形式

optimization: { // 优化项启动后 mode压缩不生效 需要配置js插件
        minimizer: [new OptimizeCss()] // 优化css
    }

• npm run build
• 

2、压缩js

• 注意 这些东西 都是比较灵活的 按需 操作
• 不需要js压缩时 我直接注释掉就行

五、图片处理

1、图片等资源文件处理

1、

2、

• 这个在 index.js里面写 3、优化一下

• 注意 这个地方手残 loge 写错了 4、如果 图片比较大 会出现什么问题吗 ？

• 更换一个大于 100k的图片试试

• 

• 意思是缺少了 file-loader 来解决 图片大于 100k的情况

• npm install --save file-loader

• 然后 npm run build

• 会在 dist 文件夹下 static ----> images 下面找到打包的图片

• 

• npm run dev

• 可在页面正常展示

• 并且 你应该 注意到了 index.js里面可设置宽高

• 

2、babel-loader es6--->es5

1、

• npm install --save babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/runtime
• 基本都装上了
• 

{
                test: /\.(js|jsx)$/, //支持require('*.js')的文件
                use: {
                    loader: 'babel-loader', // es6-->es5
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [
                            '@babel/plugin-proposal-class-properties',
                            '@babel/plugin-transform-runtime'
                        ]
                    }
                },
                // 需要转的文件夹
                include: path.resolve(__dirname, 'src'),
                exclude: /node_modules/ //排除转化的文件夹
            }

2、

• index.js 里面写一个类 测试一下

// 写一个类测试一下 
class Person {
    constructor() {
        this.name = 'ppx'
    }
    getName() {
        return this.name
    }
}
let per = new Person()
console.log(per.getName())

3、

• npm run dev 之后 发现可打印出 per.getName() 结果

3、用webpack 搭建React 项目

1、

• npm install react react-dom --save
• npm i babel-preset-react --save-dev
• npm i babel-loader@next @babel/core @babel/preset-react @babel/runtime --save

2、 常规 react 都是spa单页面

• 我们将webpack.config.js里面 多页面相关内容删除
• src里面 admin.js admin.html 都删除

怎么解决 ：https://blog.csdn.net/qq_38845858/article/details/104878454

import React from "react";
import ReactDOM from "react-dom";

// 定义一个类 继承自React.Component
class App extends React.Component {
  render() {
    return <div> Hello React! </div>;
  }
}

export default App;

ReactDOM.render(<APP />, document.getElementById("app"));

• 更改 index.html

3、

• 激动的时刻 npm run dev 跑起来
• 大功告成！

十、问题集合

1、 mode:production

打包后 dist 文件夹下面的文件 没有东西 但 mode:development可以 主要问题感觉是 某些第三方包的版本 bug

• 删除 node_modules
• 保持这个package.json

{
  "name": "webpack4",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.40.1",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.8.0"
  },
  "dependencies": {
    "autoprefixer": "^9.6.1",
    "postcss-loader": "^3.0.0"
  }
}

• 重新 安装 npm install mode: production 生产模式也可打包到dist 文件夹下面 显示正常

2、 npm run dev 跑不起来

• 解决方案：

3、加了 postcss后npm run build跑不起来

主要问题感觉是 某些第三方包的版本 bug

• 删除 node_modules
• 保持这个package.json

{
  "name": "webpack4",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.40.1",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.8.0"
  },
  "dependencies": {
    "autoprefixer": "^9.6.1",
    "postcss-loader": "^3.0.0"
  }
}

• npm install 重新安装 node_modules
• npm run build 成功

4、小图片 使用 url-loader 处理但界面显示不出来

• 解决方案

5、写的没问题但是 当点击保存后 格式乱掉了

• 怎么解决 ：

https://blog.csdn.net/qq_38845858/article/details/104878454

总结