Webpack学习笔记一初探Webpack

前言

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

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

笔记地址