Webpack 使用（二）

Webpack config

我们可以通过配置一个webpack配置文件，默认名为webpack.config.js，这样我们可以制定打包的内容，打包后的文件名，打包后放在哪个位置。
相比于之前webpack a.js a.bundle.js，这样更加简便。当然也可以执行--config命令行

---

Webpack Config

• context : 用于解决entry选项的基本目录(绝对路径)
• entry : 捆绑的入口点。
  如果传递一个字符串：该字符串被解析为启动时加载的模块。
  如果你传递一个数组或对象：启动时加载所有的模块。最后一个导出。
• output : 影响编译输出的选项。output选项告诉Webpack如何将编译的文件写入dist文件夹
  
  • filename : 打包后的文件名
  • path : 输出目录为绝对路径（必需），path: __dirname + '/dist/js'
  • publicPath : 在浏览器中引用时指定输出文件的公共URL地址
  • entry为多个入口时，可以使用[name]、[hash]、[chunkhash]可以在filename内替换相应的内容，避免几个文件打包名重叠
• module : 影响正常模块的选项
  
  • loader : 多个loader用’！’分开
  • loaders : 作为字符串
  • test : 必须满足的条件，例如可以使用正则表达式匹配test: /\.jsx$/
  • exclude : 不能满足的条件
  • include : 路径或文件夹下的相关文件当被loader转化

• plugins : 使用插件
  - 先通过npm下载插件
  - var webpackPlugin = require("webpack");
  - new webpackPlugin [{
template:'index.html', //模板文件
filename:'xxx',
inject:'head' //script放在头部标签里
}]
  ps 如果想要了解更多相应插件的配置选项可以到npm官网查询相应插件文档https://www.npmjs.com/

• 完成了相关配置后，我们可以直接使用webpack完成打包了。
  ps 如果Webpack配置文件名不为webpack.config.js(假设为a.js)，那么我们必须使用webpack - -config a.js，完成config配置

module.exports={
    entry:'./src/js/main.js',
    output:{
        path:  __dirname + '/dist/js',
        filename:'[name].bundle.js'
    }
}

---

Webpack 使用准备

• 建立dist文件夹存放打包后的文件，目录下再新建js存放打包后的js文件
• 建立src文件夹存放开发的文件，目录下再新建js和style文件夹分别存放js文件和css文件，js文件夹下建立主程序main.js
• 建立index.html，并引入main.bundle.js（就是打包后的文件名）
• 上面提到webpack有许多命令选项如--display-modules --colors --progress等等，我们可以在npm的package.json中的”scripts”下新建”webpack”：”webpack想要添加的选项”，如下，我们在命令行工具中只需使用npm run webpack即可

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
     "webpack":"webpack  --progress --display-modules --colors"
     }

---

Webpack 使用

上面的准备完成后，使用Webpack就很简单了，我们只需要执行命令npm run webpack就完成了

---