webpack的安装步骤和使用

1、建立一个空的项目文件夹；
2、终端cd定位到该文件夹；
3、sudo cnpm init -y 「初始化一个json文件」
4、sudo cnpm install -D webpack 「安装webpack」
5、sudo cnpm install -D webpack-cli 「安装webpack-cli」
6、在项目根目录下创建文件夹src【放置项目源文件】、dist【打包后的文件会在这里生成。要上传的项目也是从这里上传】、文件webpack.config.js；此时的项目结构为：
webpack-demo

• node_modules
• src
  • index.js【项目源文件】
• dist
  • index.html
• webpack.config.js
• package.json

7、安装lodash文件：

sudo cnpm install —save lodash

安装完毕之后json文件里面会多处一行代码：dependencies:{“lodash”:’…’}
8、编写 src/index.js 文件；webpack.config.js文件，并在html的中引入打包后的js文件。
9、终端执行：

npx webpack

此时dist文件夹里会自动生成一个js文件，文件名是我们在webpack.config.js中output里规定的文件名，此js文件由我们写的js文件与lodash文件打包而成。

Index.js文件代码：

import _ from 'lodash';//es6 lodash导出的默认变量用下划线来接收

function createDomElement(){
	let dom = document.createElement('div');
	dom.innerHTML = _.join(["aicode",'.com',' wow'],'');
	return dom;
}

document.body.appendChild(createDomElement());

Webpack.config.js文件代码：

const path = require(‘path’);

module.exports = {
	entry : ‘./src/index.js’,//需要被打包的js文件路径及文件名
	mode : “development”,//开发模式
	output : {
		filename : ‘main.js’,//打包后在dist里会生成一个js文件。这个filename就是打包后的文件名
		path : path.resolve(__dirname,’dist’)//打包输出的目标文件的绝对路径（__dirname为当前目录的绝对路径）
	}
}

到了这一步，每次更新代码都要在终端webpack一遍，很麻烦。因此还需要配置实时的打包编译工具：

$ sudo cnpm install webpack-dev-server -D

在json文件中增加代码：

scripts:{
    "dev":"webpack-dev-server --open"}//这里的--open表示自动打开浏览器

此时在终端执行npm run dev，就可以进行js代码的实时打包编译，代码更改之后ctrl+s保存代码，会自动打开html页面，且以后的每次更改ctrl+s之后页面都会自动更新。

现在js打包文件可以保存在内存中并实时更新了，但html文件还是在项目目录下。我们希望也将它保存在内存当中，每次编译html代码页面也能实时更新。这就需要引入插件html-webpack-plugin了

$ sudo cnpm install html-webpack-plugin -D

首先我们将dist文件夹下的index.html文件移植到项目根目录下，删除里面对js文件的引用。
然后更新配置文件config：

const path = require(‘path’);
const htmlWebpackPlugin = require(‘html-webpack-plugin’);
const htmlPlugin = new htmlWebpackPlugin({
template:path.join(__dirname,’index.html’);
filename:’index.html’;
});
module.exports = {
mode:”development”,
plugins:[htmlPlugin],
}

这时候运行npm run dev，项目中已经生成了保存在内存中的html文件，并且该文件可以自动引用打包后的文件main.js。
保存在内存中的main.js文件和index.html文件在项目目录结构中不会显示出来。

打包时的几个问题：

• js文件打包后运行npm run dev不能自动打开浏览器：没有在json文件的scripts里加–open；
• 运行时报错显示端口号已被占用。解决办法：退出终端再重新打开，cd到项目文件夹下，然后重新执行npm run dev；或者ctrl+c退出npm run dev的运行，在重新执行npm run dev。

注意事项：

• 编写js文件时，注意头部import引用时的路径是否正确；
• 编写配置文件config时，注意