webpack命令学习笔记总结

npm install webpack --save-dev
webpack hello.js hello.bundle.js

会生成一串hash
hello.bundle.js文件中生成了一大段代码是webpack内置函数，尾部有我们文件函数，注释有我们打包模块的编号，

打包过程前面也有文件对应的模块编号。

webpack加载css文件
通过css-loader!将css文件处理，将不会报错，但是并没用；
通过style-loader!将上面css-loader处理后的文件，新建stylesheet标签插入到html之中；

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

命令行指定loader

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader!'

随时重编译：

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader!' --watch

显示打包模块：

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader!' --watch --display-modules

为什么要打包模块：

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader!' --watch --display-modules --display-reasons

---

webpack配置文件

npm init .
npm install webpack
mkdir src  # 放置代码源文件的目录
mkdir dist # 放置打包过后静态资源文件的目录

配置文件：

module.exports = {
  entry:'./src/script/main.js',
  output:{
    filename:'bundle.js',
    path: './dist/' // 指定了filename的路径
  }
}

运行webpack会自动在当前目录下找webpack.config.js来运行打包编译
也可以通过--config来指定用哪个webpack配置文件。
entry: ['main.js', 'a.js']用数组会打包成两个bundle文件
entry: {main: 'main.js', a: 'a.js'}会生成一个打包文件，因为覆盖了；
可以使用占位符来防止覆盖

output:{
    filename:'[name]-[chuckhash].js',
    path: './dist/', // 指定了filename等js，html的路径
    publicPath: 'http://www.baidu.com' // 指定上线地址
  }

chuckhash打包的模块的hash值，当你修改过文件，hash才会变化。

---

当webpack生成文件带有hash值，使用webpack插件去加载这种可能随时改变名称的文件。

npm install html-webpack-plugin --save-dev

在webpack的config文件中引入这个插件：

var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
...
  plugins: [
    new htmlWebpackPlugin()   // 初始化插件
  ]
}

他会生成一个html文件，并且引入hash的打包js文件。
可以通过给 htmlWebpackPlugin 传参，指定对应的html文件作为模板，生成html文件是通过指定html插入必要的打包js文件的，放置在output所指定的路径下。

htmlWebpackPlugin({template: 'index.html'})

通过 inject 可以指定生成的引入<script>放在header还是body；

htmlWebpackPlugin({template: 'index.html', inject: 'header'})

可以给html传参，让模板使用 options 参数；webpack的Html默认可以使用ejs引擎；

htmlWebpackPlugin({template: 'index.html', inject: 'header', title: "Webpack is awesome"})

<title><%= htmlWebpackPlugin.options.title %></title>

还可以使用minify参数，来删除空格，注释等内容；
通过chunks: ['main']指定想要用的js，并注入模板；

Inline插入标签，避免html再次发送http请求js：
使用webpack源码方法：

<%= complilation.assetsp[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>

---

babel loader解决es6问题；
通过 require('path') 的 path.resolve() 转化绝对路径；
通过 exclude 取出 babel 要转化的文件，通过 include 指定要转化的路径，增加转化效率
loaders 数组排最后的先执行

loaders ['style-loader', 'css-loader?importLoaders=1']

编译html使用html-loader
编译图片文件使用file-loader，注意使用file-loader要图片路径最好写成绝对路径，如果要使用相对路径可以使用

<img src="${ require('../../assets/1.png') }"/>

然后使用image-webpack-loader对图片进行压缩