欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Webpack学习笔记一初探Webpack

程序员文章站 2022-07-02 16:57:03
前言 此内容是个人学习笔记,以便日后翻阅。 非教程,如有错误还请指出 Webpack 打包文件 支持JS模块化 模式: production(0配置默认), development(生产环境) 更详细的请前往 webpack官网 安装 npm i webpack webpack cli D 执行 w ......

前言

此内容是个人学习笔记,以便日后翻阅。非教程,如有错误还请指出

webpack

  • 打包文件
  • 支持js模块化
  • 模式: production(0配置默认), development(生产环境)

更详细的请前往 webpack官网

安装

  • npm i webpack webpack-cli -d

执行 webpack

  • npx webpack
  • 注意: 在有package.json的目录下执行命令, 当前目录一定要有src文件夹

手动配置webpack

module.exports = {
    mode: 'development', // 生产环境
    entry: './src/index.js', // 入口文件
    output: {
        filename: ' bundle.js',
        path: path.resolve(__dirname, 'dist'),  // 目标输出路径, path的绝对路径
    }
}

mode: 告诉 webpack 使用响应模式的内置优化

  • 使用development
    module.exports = {
    + mode: 'development'
    - plugins: [
    -   new webpack.namedmodulesplugin(),
    -   new webpack.defineplugin({ "process.env.node_env": json.stringify("development") }),
    - ]
    }

webpack在生产环境下默认使用的插件。

  • production
  module.exports = {
  +  mode: 'production',
  -  plugins: [
  -    new uglifyjsplugin(/* ... */),
  -    new webpack.defineplugin({ "process.env.node_env": json.stringify("production") }),
  -    new webpack.optimize.moduleconcatenationplugin(),
  -    new webpack.noemitonerrorsplugin()
  -  ]
  }

在生产环境下会对代码进行代码压缩等优化, 默认使用这些插件

## package.json中配置 webpack 快捷脚本
javascript "scripts": { "test": "echo \"error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js" },
在脚本 scripts对象中新增了 build命令, 指定webpack --config, 通过--config选项来指定配置文件。
当执行 npm run build时, 会自动启用 webpack,并且找到 webpack.config.js配置文件并执行。

## plugins插件

  • webpack-dev-server
    为webpack应用程序提供开发服务器,它只适用于开发。在scripts中可以配置 "dev": "webpack-dev-server""
    运行使用 npm run dev

笔记地址