关于前端:webpack从零搭建一个项目基本配置

1、新建我的项目文件夹 test

2、终端 cd test

3、运行

npm init -y

创立package.json文件，生成如下目录

4、配置webpack.config.js

/*
  1. 装置webpack
    npm install webpack@5.5.1 webpack-cli@4.2.0 -D // -D装置开发环境
  2. package.json
    script节点下的脚本，能够通过npm run xx来执行，例如：npm run dev
      "scripts": {
        "dev": "webpack"          // 不会执行压缩，只是运行webpack生产文件，打包文件到dist目录
        "dev": "webpack serve"    // webpack主动打包，webpack-dev-server插件(serve)打包生成文件存储在内存中，本地没有打包文件，用做开发启动
        "build": "webpack --mode production" // 我的项目上线公布，运行该命令，本地生成build文件
        // --mode webpack运行模式 production 生成环境 压缩和性能优化，而且会笼罩webpack.config.js中的mode的值
      }
  3. 默认约定
    默认的打包入口文件为 src -> index.js
    默认的输入文件门路为 dist -> main.js
*/
// html-webpack-plugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 打包，先删除dist文件夹
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const path = require('path');                       // node.js中专门操作门路的模块
module.exports = {
  mode: 'development',                              // mode 用来指定构建模式。可选值development | production
  devtool: 'eval-source-map',                       // 开发环境，SourceMap控制台报错行数校验。
  devtool: 'nosources-source-map',                  // 生成环境，为了我的项目平安，生成环境应用nosources，这样会提供开发代码的报错行，然而console中不会裸露代码。（source-map)裸露代码和谬误行
  entry: path.join(__dirname, './src/index.js'),    // 打包入口文件门路
  output: {
    path: path.join(__dirname, './dist'),           // 输入文件的门路
    filename: 'js/index.js'                         // 输入文件名称
  },
  plugins: [
    new HtmlWebpackPlugin({
      template:'./src/index.html',                  // 源文件门路
      filename:'./index.html',                      // 复制、生成虚构文件门路
      chunks:['main']
    }),
    new CleanWebpackPlugin()
  ],
  devServer: {                                      // webpack-dev-server插件选项配置
    open: true,                                     // 打包当前是否主动启动
    host: 'localhost',                              // 主机地址
    port: 3000,                                     // 启动端口号
  },
  module: {                                         // 所有第三方文件模块匹配规定配置
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader']},                 // 程序不能颠倒，打包会报错，从后往前面执行的。
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}, // 程序不能颠倒，打包会报错，从后往前面执行的。
      // { test: /\.jpg|jpeg|png|gif|bmp$/, use: 'url-loader?limit=10240'},      // 图片地址loader，小图片咱们能够给转换为base64，配置参数（limit小于等于10240字节(b),10kb）
      { test: /\.jpg|jpeg|png|gif|bmp$/, use: {
        loader: 'url-loader',
        options: {
          limit: 10240,
          outputPath: 'image'     // 公布打包的时候图片输入到image文件夹中
        }
      }},
      {
        test: /\.js$/,
        exclude: /node_modules/,  // 排除安装包，只转换程序员增加的js文件
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['@babel/plugin-proposal-class-properties'] // 插件
          }
        }
      }
    ]
  }
  /*
    4. webpack插件
      1. webpack-dev-server     自动化构建插件 webpack serve 能够启动实时打包的http服务器 localhost:8080拜访
        装置：npm install webpack-dev-server@3.11.0 -D
        配置：package.json中 scripts中 "dev": "webpack serve"
        主见：如果不开启主动打包，手动启动会每次替换dist文件，开启实时打包webpack会把生产的文件保留到内存中，默认存储到根目录中，暗藏不可见，然而能够localhost:8080/index.js拜访，
            所以须要批改index.html中引入的index.js文件地址 /index.js
      2. html-webpack-plugin    html模板插件
        咱们当初拜访localhost:8080默认拜访的是根目录，所以这个插件能够帮忙咱们间接拜访scr上面的index.html文件。
        装置：npm install html-webpack-plugin@4.5.0 -D
        主见：如果配置实现，启动报错，那么可能是webpack和插件的版本不匹配，webpack写死版本号 5.5.1,删除node_modules重新安装
            index.html头部也不须要本人引入js，插件会主动将js引入到body最初一行。
      3. clean-webpack-plugin 打包主动清理dist目录
        装置：npm install clean-webpack-plugin@3.0.0 -D
  */
  /*
    5. loader：帮助webpack解决非.js
      默认webpack只能解决.js文件模块，为了反对其余文件所以须要应用loader加载器解决其余文件
      css-loader     .css
      less-loader    .less
      babel-loader    ES6等高级js语法
      1. css文件loader
        npm i style-loader@2.0.0 css-loader@5.0.1 -D
      2. less文件loader
        npm i less-loader@7.1.0 less@3.12.2 -D
      3. url相干loader
        npm i url-loader@4.1.1 file-loader@6.2.0 -D
      4. ES6语法转换 babel-loader
        npm i babel-loader@8.2.1 @babel/core@7.12.3 @babel/plugin-proposal-class-properties@7.12.1 -D
  */

  /*
    6. 企业我的项目打包优化
      1. 生成打包报告，依据报告剖析具体优化计划
      2. Tree-shaking
      3. 为第三方库启用CDN加载
      4. 配置组件的按需加载
      5. 开启路由懒加载
      6. 定制首页内容，服务器渲染SSR
  */
  /*
    7. Source Map
      定义：信息文件，存储地位信息，代码公布压缩混同前后对应关系。
      问题：webpack 默认启用SouceMap然而报错行数和开发行数有出入
   */
}

5、package.json 配置scripts: {}

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "babel-loader": "^8.2.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.0",
    "jquery": "^3.6.0",
    "less": "^3.12.2",
    "less-loader": "^7.1.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "5.5.1",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  }
}

github我的项目地址：https://github.com/zxc1989092…