webpack

webpack.config.js配置文件

• entry: js的入口文件
• externals: 外部依赖的声明
• output:目标文件
• resolve:配置别名
• module:各种文件,各种loader
• plugins:插件

2 webpack loaders(最重要部分)

html:html-webpack-plugin / html-loader

js:babel-loader + babel-preset-es2015

css:style-loader + css-loader

image+font:url-loader

3 常用命令

• webpack

  以不压缩的形式打包

• webpack -p

  线上发布时的打包,对所有文件进行最小化压缩

• webpack –watch(有了4后,此命令几乎无用了)

  监听文件的改变,自动编译

• webpack –config webpack.config.js

4 webpack-dev-server

作用:前端开发服务器

特色:可以在文件改变时,自动刷新浏览器

安装:npm install webpack-dev-server –save-dev

配置:webpack-dev-server/client?http://localhost:8088

使用:webpack-dev-server –port 8088 –inline

5 安装webpack

在git bash中执行(全局webpack安装)

Shusheng Shi@PC-of-sss MINGW64 ~/mmall/doc/mmall-fe (mmall_v1.0)
$ npm install webpack -gnpm WARN optional dep failed, continuing [email protected]
> [email protected] postinstall C:\Users\Shusheng Shi\mmall\doc\mmal                                                                       l-fe\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
                  [email protected] node_modules\webpack
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected]
├── [email protected]
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], y18n@                                                                       3.2.1, [email protected], [email protected], [email protected], require-main-                                                                       [email protected], [email protected], [email protected], [email protected], os-loc                                                                       [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], json                                                                       [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], path-                                                                       [email protected], [email protected], [email protected], constants-browserify@1                                                                       .0.0, [email protected], [email protected], [email protected], [email protected],                                                                        [email protected], [email protected], [email protected], timers-browserify@                                                                       2.0.4, [email protected], [email protected], [email protected], [email protected], r                                                                       [email protected], [email protected], [email protected], [email protected], cr                                                                       [email protected])
├── [email protected] ([email protected], [email protected], [email protected], es6-map                                                                       @0.1.5)
└── [email protected] ([email protected])
      

项目目录安装webapck(本地webpack安装,防止部署环境和本地依赖包版本不一致)

$ npm install [email protected] --save-dev                                                                                          npm WARN optional dep failed, continuing fsevent                                                                                 [email protected]
[email protected] node_modules\webpack
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], bi                                                                                 [email protected], [email protected], [email protected])
├── [email protected] ([email protected],                                                                                  [email protected])
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected]                                                                                 .10)
├── [email protected] ([email protected], readable-strea                                                                                 [email protected])
├── [email protected] ([email protected], s                                                                                 [email protected])
├── [email protected] ([email protected], uglify-to-bro                                                                                 [email protected], [email protected], [email protected])
├── [email protected] (https-browserify@0.                                                                                 0.1, [email protected], [email protected]                                                                                 , [email protected], [email protected], consta                                                                                 [email protected], [email protected], proce                                                                                 [email protected], [email protected], [email protected],                                                                                  [email protected], [email protected], stream-brow                                                                                 [email protected], [email protected], timers-browse                                                                                 [email protected], [email protected], [email protected].                                                                                 0, [email protected], [email protected], stream-htt                                                                                 [email protected], [email protected], [email protected], cr                                                                                 [email protected])
└── [email protected] ([email protected], async@0                                                                                 .9.2, [email protected])
      

看下版本

Shusheng Shi@PC-of-sss MINGW64 ~/mmall/doc/mmall                                                                                 -fe (mmall_v1.0)
$ webpack -v
webpack 1.15.0
Usage: https://webpack.github.io/docs/cli.html
      

看下文件,新增了node_modules/

Shusheng Shi@PC-of-sss MINGW64 ~/mmall/doc/mmall-fe
$ ls
README.md  node_modules/  package.json  src/      

看出webpack就安装于此

Shusheng Shi@PC-of-sss MINGW64 ~/mmall/doc/mmall-fe          (mmall_v1.0)
$ cd node_modules/

Shusheng Shi@PC-of-sss MINGW64 ~/mmall/doc/mmall-fe         /node_modules (mmall_v1.0)
$ ls
webpack/