webpack基本介绍

1. 代码地址：https://gitee.com/q_yup/webpack-test
2. webpack基本介绍

webpack是一款打包工具。

• 给JS准备的打包工具
• 把很多模块打包成很少的静态文件 (JS、css)
• 代码分割：加载项目时，只加载当前需要的一部分文件
• loader概念：模块可以通过loader处理各种文件（vue、css、图片、json文件甚至是less文件）。如果是JS文件，不论是commonJS模块化方式、AMD模块化方式、UMD模块化方式写的都可以通过loader处理。
• https://webpack.github.io
• 插件系统（使用vue-loader）、模块热更新（利于项目调试开发）

注：webpack特性已标注不一样的字体背景颜色。

1. webpack安装和命令行

• 打开命令行
• 新建文件：mkdir webpack-test
• 进入webpack-test文件夹，初始化npm init
• 安装webpack，npm i webpack@1.13.2 —save-dev
• 新建hello.js,并执行打包hello.js：

执行命令是：webpack hello.js hello.build.js 格式为： webpack 打包js文件 打包之后生成文件
需要注意的是，window10系统不能直接识别webpack指令需要配置到package.js文件中，才能被执行（全局安装webpack就可以直接在控制台执行）

• 新建style.css，查看webpack对css文件的处理（webpack是不支持JS以外的文件打包的，如果需要处理css、vue等文件需要安装对应的loader） npm i css-loader@0.25.0 style-loader@0.13.1 —save-dev

• css-loader!./style.css 这种写法的意思就是指定css文件的处理(打包)使用css-loader

  style-loader!css-loader!./style.css 会将处理后的css文件引入到html中
  
  

• 处理单个css文件：require(‘style-loader!css-loader!./style.css’);

  批量处理在命令行执行：
  webpack hello.js hello.build.js —module-bind “css=style-loader!css-loader”
  注意：使用webpack的—module-bind 属性
  添加—watch文件更新时自动打包
  webpack hello.js hello.build.js —module-bind “css=style-loader!css-loader” —watch
  添加—progress查看打包过程
  webpack hello.js hello.build.js —module-bind “css=style-loader!css-loader” —progress
  添加—display-modules查看打包的模块
  webpack hello.js hello.build.js —module-bind “css=style-loader!css-loader” —progress —display-modules
  添加—display-reasons查看为什么打包这个模块的原因
  webpack hello.js hello.build.js —module-bind “css=style-loader!css-loader” —progress —display-modules —display-reasons

完整版：
webpack hello.js hello.build.js —module-bind “css=style-loader!css-loader” —progress —display-modules —display-reasons —watch

PS D:\OpenSource\webpack-test> webpack
webpack 1.13.2
Usage: https://webpack.github.io/docs/cli.html
Options:
--help, -h, -?
--config
--context
--entry
--module-bind
--module-bind-post
--module-bind-pre
--output-path
--output-file
--output-chunk-file
--output-named-chunk-file
--output-source-map-file
--output-public-path
--output-jsonp-function
--output-pathinfo
--output-library
--output-library-target
--records-input-path
--records-output-path
--records-path
--define
--target
--cache                                                                                           [default: true]
--watch, -w
--watch which closes when stdin ends
--watch-aggregate-timeout
--watch-poll
--hot
--debug
--devtool
--progress
--resolve-alias
--resolve-loader-alias
--optimize-max-chunks
--optimize-min-chunk-size
--optimize-minimize
--optimize-occurence-order
--optimize-dedupe
--prefetch
--provide
--labeled-modules
--plugin
--bail
--profile
-d                                    shortcut for --debug --devtool sourcemap --output-pathinfo
-p                                    shortcut for --optimize-minimize
--json, -j
--colors, -c
--sort-modules-by
--sort-chunks-by
--sort-assets-by
--hide-modules
--display-exclude
--display-modules
--display-chunks
--display-error-details
--display-origins
--display-cached
--display-cached-assets
--display-reasons, --verbose, -v
Output filename not configured.
PS D:\OpenSource\webpack-test>