Webpack学习笔记(二)

• 首先要cd到自己的项目目录下,然后使用npm创建项目

  npm init

• 编写自己的js文件

  webpack you.js bundle.js

  这样就能成功的打包了

• 在命令行中使用webpack要指定module时可以使用以下方法

  webpack you.js bundle.js --module-bind  the_modelu_name

  简单的介绍几个常用的module

  1. ’css=style-loader!css-loader’
  2. 察看打包过程 –progress
  3. 察看打包模块详情 –display-modele
  4. 察看打包模块原因 –display-reason

webpack 的基础配置

最简单的配置

module.exports = {
    entry:'you/own/main.js',
    output:{
        path:'the/path/you/want/to/save',
        filename:'theOutputFileName.js'
    }
}

如果我们直接用webpack.config.js进行webpack打包,那么我们想要使用之前在命令行中使用的模块,那么我们应该打开项目根目录下由npm init目录创建的package.json文件
基本内容如下:

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

我们要在scripts中写入要执行的命令:

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack":"webpack --progress --display-module --colors --display-reason"
  },
  "author": "",
  "license": "ISC"
}

entry的配置

entry有三种配置方式

1. 单文件模式

   entry:'the/js/path.js'

   主要用于单文件打js打包

2. 数组模式

   entry:['the/js/path1.js','the/js/path2.js']

   主要用于解决两个平级的,互相依赖的文件打包到一起

3. 对象模式

   entry:{
       pageOne:'the/js/path.js',
       pageTwo:['the/js/path1.js','the/js/path2.js']
   }

   用于多个页面的js打包

---

output的配置

output:{
    path:'the/paht/you/want/to/save',
    filename:[name]-[crunkhash].js
}

其中[name],[chunkhash],[hash]是占位符
- [name]用来表示文件名
- [chunkhash]表示本文件的md5 hash值
- [hash]用来表示本次打包的md5 hash值

实际html中的使用

为了保证文件的唯一性问题,我们通常要使用crunkhash来每次生成不同的文件,但是我们不可能每次都手工修改在html中的js引用文件名,所以这个时候我们就要借用相关插件了

 npm install -g html-webpack-plugin

htmlwebpackplugin插件的使用方法

##### 单个html文件

在webpack.config.js中

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:{
        main:'./main.js',
        index:'./index.js',
        this:'./this.js'
    },
    output:{
        path:'./the/output/',
        filename:'[name]-[chunkhash].js
    },
    plugins:[
    new htmlWebpackPlugin{(
        filename:'theFileNameAsYouLike-[hash].html', 
        //指定文件名,也可以不指定
        template:'./index.html',
        //打包文件的模版及位置,也就是原html文件
        inject:'body',    
        //script放置位置,建议使用body
        publicPaht:'http://youURL/'
        //线上地址的URL,这样打包之后所有的文件内容都会改成线上地址
        minify:{  //对html进行压缩
          removeComments:true,
          //删除注释
          collapseWhitespace:true,
          //删除空格
        },
        chunk:['main','index'],
        //允许你只加载自己需要的js,这里的main,index就是指在entry中指定的main,index这个属性多用于在多文件中
        excludeChunk['this'],
        //加载在entry中除了this外所有的js文件.一般与chunk属性只使用其中的某一个
    )]
}

这样执行webpack命令就可以执行打包,并自动引用最新的js文件

多个html文件

在webpack.config.js中

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:{
        main:'./main.js',
        index:'./index.js'
    },
    output:{
        path:'./the/output/',
        filename:'the/path/you/want/save/[name]-[chunkhash].js
    },
    //因为plugins对象的值是数组,所以我们可以写多个值,对于多个页面,直接进行多次构建即可
    plugins:[
    new htmlWebpackPlugin({
        filename:'the/path/you/want/save/theFileNameAsYouLike-[hash].html', 
        template:'./pageOne.html',
    }),
    new htmlWebpackPlugini({
        filename:'the/path/you/want/save/theFileNameAsYouLike2-[hash].html', 
        template:'./pageTwo.html',
    })
    ]
}