Webpack笔记

项目的Demo放在:https://github.com/KissYouGoodBye/webpack

安装Webpack

首先得有Node.js

然后通过npm install -g webpack安装webpack

在根目录创建webpack.config.js

module.exports = {
  entry: './js/main.js',
  output: {
    filename: './dist/bundle.js'
  },
  module: {
    loaders:[
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
      { test: /\.css$/, loader: 'style-loader!css-loader' },
    ]
  }
};

执行webpack

webpack将css js html甚至图片所有资源都放在js里面

然后在index。html里面读一个js就可以加载所有需要的资源了

可以在main.js里面用require方法加载的需要的内容，比如图片，样式

var img1 = document.createElement("img");
img1.src = require("../img/small.png");
document.body.appendChild(img1);

var img2 = document.createElement("img");
img2.src = require("../img/big.png");
document.body.appendChild(img2);
document.write('<h1>你好</h1>');
require('../css/app.css');