webpack之打包js、css、html、img

初次接触webpack，还是在学习vue的时候，一直对wepack的打包机制不是很清楚 近来有时间，了解了一下webpack打包js、css、html以及img的步骤以及踩了一些坑 故此记录一下。

webpack详细配置内容可以参考官网(https://webpack.docschina.org/)

首先我们创建一个目录，这里我创建的目录为webpack，使用webpack进行打包 则需要安装webpack以及webpack-cli，使用npm安装（node自带npm安装）   如果你全局安装了node  那么可以直接安装webpack  如果没有node  请先安装node(https://nodejs.org/zh-cn/)

npm install webpack --save-dev
npm install webpack-cli --save-dev //在项目中安装(webpack官网已经不建议全局安装了)

我的目录如下：

 这是package.json文件的内容

 打包js

 在src下 新建index.js 与bar.js  内容分别如下：

// index.js
import bar from './bar.js';
bar();
function component() {
	const element = document.createElement("div");
	element.innerHTML = '<span>123测试</span>';
	return element;
}
document.body.appendChild(component());
import './css/main.css';



//bar.js
export default function bar() {
	console.log('这是测试内容')
}

下面我们来完善webpack.config.js   webpack打包是基于这个文件的配置来进行打包的

//webpack.config.js
const path = require('path');
module.exports = {
    entry: {
        'index': './src/index.js' // 入口文件
    },
    output: {
        filename: '[name]_out.js'   //name为entry中的key的值
    },
    mode: 'development' //打包模式  development 开发模式  production 生产模式(代码会压缩)
}

webpack.config.js配置好后 直接在命令行中输入webpack就可以进行打包了