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