webPack基础

package.json

• name 包名称

• version 版本号 语义化

• main 包执行的入口

• scripts 自定义脚本

//package.json
{
  "name": "try",
  "version": "1.0.0",
  "description": "",
  "main": "module.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

自带的 npm 也升级到了5.0的确带来了不少便利，大概讲一下 npm 5 的一些大的变化：

• 使用npm install xxx命令安装模块时，不再需要–save选项，会自动将模块依赖信息保存到 package.json 文件；
• 安装模块操作（改变 node_modules 文件夹内容）会生成或更新 package-lock.json 文件；
• 发布的模块不会包含 package-lock.json 文件；
• 如果手动修改了 package.json 文件中已有模块的版本，直接执行npm install不会安装新指定的版本，只能通过npm install xxx@yy更新

cnpm install lodash --save

{
  "name": "try",
  "version": "1.0.0",
  "description": "",
  "main": "module.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

• 开发环境依赖

npm install lodash --save-dev

使用命令 --save 或者说不写命令 --save ,都会把信息记录到 dependencies 中；

dependencies 中记录的都是项目在运行时需要的文件；
使用命令 --save-dev 则会把信息记录到 devDependencies  中；
 devDependencies 中记录的是项目在开发过程中需要使用的一些文件，在项目最终运行时是不需要的；也就是说我们开发完成后，最终的项目中是不需要这些文件的；

• 只安装生成环境，与功能相关的依赖都应该放这里

npm install lodash --only==prod

• 只安装开发环境，放构建工具、检测工具像eslint，等开发需要的工具

npm install lodash --only==dev

{
  "name": "try",
  "version": "1.0.0",
  "description": "",
  "main": "module.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "lodash": "^4.17.21"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

语义化版本

允许依赖的版本是动态的

• ^version 中版本和小版本

  ^1.0.1->1.x.x 1.x.x中最新的版本

• ~version 小版本

  ~1.0.1->1.0.x 1.0.x中最新的版本

• version 特定版本

scripts

 "dev":"webpack-dev-server",

运行 npm run dev

会在本地开启一个webpack开发服务器

 "build":"eslint ./src&&webpack"

运行 npm run build

对代码格式做校验，然后执行webpack配置

npm install过程

• 寻找报版本信息文件(package.json)，依照它来进行安装
• 查找package.json中的依赖，并检查项目中其他的版本信息文件
• 如果发现了新包，就更新版本信息文件

自定义配置

src下index.js是默认入口文件，如果需要更改的话，需要自定义配置

新建webpack.config.js,webpack在运行的时候，如果发现有一个webpack.config.js，就会去走webpack.config.js里指定的配置

• entry 工程资源入口，可以是一个文件也可以是多个，webpack可以以此为切口依次寻找模块，进行打包

• output

  • path 出口文件夹路径
  • filename 打包结果文件名

• __dirname 当前文件所在文件夹的绝对路径。

• path.join(path1，path2，path3…)

  作用：将路径片段使用特定的分隔符（window：\）连接起来形成路径，并规范化生成的路径。若任意一个路径片段类型错误，会报错。

//webpack.config.js
const path  = require("path");
module.exports={
    entry:'./app.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    }
}

运行webpack-dev-dev-server,可以在命令行启动全局安装的webpack-dev-server，webpack-dev-server

• webpack-dev-server --open直接打开浏览器运行项目
• 提供文件变化监听，如果项目文件有更新，会自动打包，并刷新页面

Loader

loder提供扩展功能，需要额外安装，如css-loader，

每个版本webpack module的写法不一样，要去找文档看

• css-loader 解析css文件
• style-loader 渲染css样式

const path  = require("path");
module.exports={
    entry:'./app.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    },
    devServer:{
        port:8080,
       static:{
        publicPath:'/dist'
       }
    },
    module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
              }
            ]
          }
        ]
      }
}

Plugin

去除注释换行空格，减小资源体积，安装 uglifyjs-webpack-plugin

Webpack5无法使用uglifyjs-webpack-plugin压缩js， 使用terser-webpack-plugin

const path  = require("path");
const UglifyJSPlugin  = require("uglifyjs-webpack-plugin");
module.exports={
    entry:'./app.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    },
    devServer:{
        port:8080,
       static:{
        publicPath:'/dist'
       }
    },
    module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
              }
            ]
          }
        ]
      },
      plugins: [
        new UglifyJSPlugin(),
      ]
}