Webpack2 完整踩坑教程(六)

本文基于NODEJS环境，nodejs的安装参考线上的流程：https://nodejs.org/en/ 。

Webpack的核心哲学思想
1.一切都是模块——就像js文件可以视作“模块”一样，其他所有的一切（CSS，图片，HTML）都可以被视作模块，通过require加载。。
2.模块加载器会把所有的模块最终打包生成一个巨大的“bundle.js”文件，并且会一直不停进行加载！所以Webpack通过大量的特性去分割你的代码，生成多个“bundle”片段，并且异步地加载项目的不同部分。

六.用file-loader加载图片（用于处理图片及JS 、 CSS等文件）

1.在webpack.config.js的添加devtool:’source-map’ ，用于在打包代码的同时生成一个sourcemap文件，并在打包文件的末尾添加//# souceURL，注释会告诉JS引擎原始文件位置

2.在src目录内新建img文件夹，复制二张图片进来供测试用。

3.在src目录内新建face.js文件

const face=require('./img/face.png');
const Image=`<img src="${face}">`;
export default Image;

4.在src目录内新建content.js文件

const content=require('./img/content.png');
const Image=`<img src="${content}">`;
export default Image;

5.安装文件加载器 npm install file-loader –save-dev

6.修改webpack.config.js文件，添加file-loader加载器

...
module.exports={
entry:entry,//入口文件
plugins:plugins,
module: {
loaders:[
{
test: /\.js$/,
loaders: ["babel-loader"],
exclude: "./node_module/"
},
{
test: /\.(png|jpg|gif)$/,
loaders: ["file-loader"],
exclude: "./node_module/"
}
]
},
...
...

7.修改index.js，通过import加载图片到页面

import face from ‘./face’;
import content from ‘./content’;
var newMessage=()=>(

` <p>${face} ${content}</p>`
1
1

);
var app=document.getElementById(‘app’);
app.innerHTML=newMessage();
if(module.hot){//启用热重载
module.hot.accept();
}