《webpack深入与实战》学习笔记

1.webpack安装和使用

//npm初始化：cnpm init//安装webpack：cnpm install -g webpack --save-dev//打包：webpack test.js test.bundle.js

2.引用css文件时
打包的js文件中引用了css文件时，需要安装css-loader和style-loader

//安装css-loader和style-loader：cnpm install -g css-loader style-loader --save-dev//打包：webpack test.js test.bundle.js --module-bind 'css=style-loader!css-loader'

或者在引用css的时候声明其打包方式

require('style-loader!css-loader!./style.css')

3.修改后自动打包

$:webpack test.js test.bundle.js --module-bind 'css=style-loader!css-loader' --watch --progress --display-modules --display-reasons

–watch:监视文件的修改，修改后自动执行打包
–progress:显示打包进度
–display-modules:显示打包的模块
–display-reasons:显示模块打包的原因

4、webpack基本配置
新建webpack.config.js文件。

module.exports={    entry: './src/js/main.js', //打包入口    output:{        path: '/Users/xxx/workspace/webpack2/dist/js',        filename: 'bundle.js'    }}

在package.json中配置webpack

{  "name": "webpack2",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"  },  "author": "xxx",  "license": "ISC"}

//执行webpack.config:cnpm run webpack

entry:[]，将不互相依赖的、平行的文件打包到一起；
entry:{}，多页面应用程序，output使用[name]、[hash]、[chunkhash]等占位符，否则生成的打包文件会覆盖

module.exports={    entry:{        main: './src/js/main.js',        a: './src/js/a/js'    },    output:{        path: '/Users/xxx/workspace/webpack2/dist/js',        filename:'[name]-[hash].js'    }}

文件hash值可看做文件版本号或者md5值，文件发生更改时hash值也发生变化。
5、在html中引用带hash后缀的文件
打包后的文件若带hash后缀的，因为每次打包生成的文件的hash值都不同，在html中方便地引用这样的文件需要webpack的插件。

//安装插件:cnpm install -g html-webpack-plugin --save-dev

在webpack配置文件中引用插件，并在插件属性中初始化

var htmlWebpackPlugin = require('html-webpack-plugin');module.exports={    entry: {        index: './src/js/index.js',        a: './src/js/a.js'    }, //打包入口    output:{        path: '/Users/xyn/workspace/webpack/dist',        filename: 'js/[name]-[chunkhash].js'    },    plugins:[        new htmlWebpackPlugin({            template: 'index.html',            filename:'index-[hash].html',            inject: 'body',        })    ]}