Webpack配置

建立項目目錄安裝依賴項

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack

建立相應的子目錄以下：

src目錄用於存放項目源代碼，dist目錄存放打包壓縮後生成的文件，最終會被用於加載到瀏覽器中。

運行下面命令，安裝依賴庫

npm install --save lodash

index.js中內容以下：

import _ from "Lodash";

function component() {
    var element = document.createElement('div');

    element.innerHTML = _.join(['Hello','webpack'],' ');

    return element;
}

document.body.appendChild(component());

去命令行執行

./node_modules/.bin/webpack src/index.js dist/bundle.js

能夠會在dist中找到bundle.js生成。

webpack.config.js的配置

//webpack.config.js
var path = require('path');

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

//package.json
"scripts": {
    "start": "webpack --config webpack.config.js",
    "build": "webpack"
  },

運行下面命令，生成bundle.js

npm run build

webpack管理項目圖片字體CSS管理

webpack動態打包依賴，除了js文件還能夠打包css,圖片,字體等。不過須要用到loader。

打包css

要在js模塊中引入css文件須要安裝如下依賴：

npm install --save-dev style-loader css-loader

在src下加入main.css樣式文件：

.hello {
  color: red;
}

index.js修改以下：

import _ from "Lodash";
import './main.css';

function component() {
    var element = document.createElement('div');

    element.innerHTML = _.join(['Hello','webpack'],' ');
    element.classList.add('hello');

    return element;
}

document.body.appendChild(component());

webpack.config.js修改以下：

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
     rules: [
       {
         test: /\.css$/,
         use: ['style-loader','css-loader']
       }
     ]
   }
};

運行npm run build，在瀏覽器中打開index.html,發現helloworld已經變成紅色。

打包圖片

首先安裝依賴

npm install --save-dev file-loader

修改webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
     rules: [
       {
         test: /\.css$/,
         use: ['style-loader','css-loader']
       },
       {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           'file-loader'
         ]
       }
     ]
   }
};

在index.js中引入import Icon from './icon.png';

var myIcon = new Image();
    myIcon.src = Icon;
 
    element.appendChild(myIcon);

在main.css中引入import Icon from './icon.png';
同時搞一張名爲icon.png的圖片到src下，運行npm run build,圖片已被插入文檔。
這麼隨意的加載須要的文件，很是適用於組件化的開發方式，如react，能夠把一個組件須要的資源都放在一塊兒

- |- /assets
+ |– /components
+ |  |– /my-component
+ |  |  |– index.jsx
+ |  |  |– index.css
+ |  |  |– icon.svg
+ |  |  |– img.png