当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Webpack学习笔记一初探Webpack

Webpack学习笔记一初探Webpack

2019年01月19日  | 移动技术网IT编程  | 我要评论

前言

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

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

笔记地址

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网