• 運(yùn)行./node_modules/.bin/webpack src/index.js dist/bundle.js。這是將src/index.js打包到dist/bundle.js，也可以在package.json中給這條命令換個名字。webpack內(nèi)置babel,所以可以在index.js中使用es6的語法。

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack src/index.js dist/bundle.js"http://寫在這里 在終端運(yùn)行npm run build
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.5.6"
  }
}

• 上面的命令有個缺點(diǎn)，那就是大多數(shù)項目需要更復(fù)雜的設(shè)置，為了避免在終端輸入太多的命令，我們需要一個配置文件。在同級目錄下新建一個webpack.config.js文件:

const path = require('path');

module.exports = {
  //入口 index.js
  entry: './src/index.js',
  //輸出
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

• 在終端輸入./node_modules/.bin/webpack --config webpack.config.js。如果不加配置文件，webpack也會自動尋找當(dāng)前目錄下的webpack.config.js，上面那句話可以簡寫成./node_modules/.bin/webpack。
• 這時候package.json。中的build也可以簡化成"build": "webpack"。為什么呢？是因為build命令會自動到當(dāng)前目錄下的./node_modules/.bin/目錄下尋找可執(zhí)行文件，webpack又會自動尋找當(dāng)前目錄下的webpack.config.js。
• webpack也可以將css打包。它的打包方式是讀取css文件后寫到style標(biāo)簽里，將style標(biāo)簽放到head標(biāo)簽中。只要在index.js中輸入import './path/name.css'，然后再package.json中寫入一段：

const path = require('path');

module.exports = {
  //入口 index.js
  entry: './src/index.js',
  //輸出
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    loaders:[
      {
        test: /\.css$/,
        use: 'style-loader!css-loader!autoprefixer-loader'
//順序為從右向左:給屬性加前綴、讀取css文件到內(nèi)存、加到head標(biāo)簽中
      }
    ]   
  }
};

上面的css加載器也可以寫成以下形式

loaders:[
  {
    test: /\.css$/,
        loaders:[
          'style-loader',
          'css-loader',
          'autoprefixer-loader'
        ]
  }
]

• 加載圖片img.src = require(./1.png)，然后在loaders中配置，運(yùn)行可能會報錯，提示需要安裝file-loader，運(yùn)行npm install -D file-loader。使用這種方法只要圖片內(nèi)容改變，webpack會將圖片文件改名，可以解決緩存問題。（經(jīng)測試import png from './1.png'的寫法也可以引用圖片，也就是說webpack消除了AMD、CMD以及ES module的區(qū)別）

loaders:[
  {
    test: /\.css$/,
    use: 'style-loader!css-loader!autoprefixer-loader'
  },
  {
    test: /\.(png|jpg|jpeg)$/,
    use: 'url-loader'
  }
]

• 每次改動后都要運(yùn)行一次npm run build，這樣很麻煩。所以webpack提供了webpack --watch命令來自動build。同樣為了統(tǒng)一命令，在package.json里加一條

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack src/index.js dist/bundle.js",
    "watch": "webpack --watch"http://在終端運(yùn)行npm run watch
  }

• 使用sass時如果遇到提示安裝node-sass，要先在git bash里運(yùn)行
  export SASS_BINARY_SITE='https://npm.taobao.org/mirrors/node-sass'再安裝node-sass才可能成功
• 多頁打包

{
    entry: {
        page1: "./page1",
        //支持?jǐn)?shù)組形式，將加載數(shù)組中的所有模塊，但以最后一個模塊作為輸出
        page2: ["./entry1", "./entry2"]
    },
    output: {
        path: "dist/js/page",
        filename: "[name].bundle.js"
    }
}