本文基于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();
}