Webpack笔记

来源:互联网 发布:淘宝冰点营销怎么使用 编辑:程序博客网 时间:2024/06/05 11:56

项目的Demo放在:bye

安装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');


0 0