Webpack的基本搭建

Webpack的基本搭建

使用Node.js搭建Webpack的方法，可以配置里面的热更新，打包css、html、sass、less等系列，话不多说，直接给步骤

一.基本webpack搭建

1.新建新文件，在文件内的地址栏输入“cmd”，然后回车，进入Node.js（提前安装好）

2.在Node.js中输入nmp init点击回车，然后一直点击，直到出现yes？输入Y点击回车

3.然后导入webpack 和webpack-cli

4.在刚刚创建的文件夹内新建src文件夹，并在src文件夹内新建css、image、script文件夹和index.html、main.js文件

（将index.html放到代码编辑器内，随意写写内容）

5.在安装webpack-dev-server -D（属于开发者模式）

npm install webpack-dev-server -D

6.配置webpack.config.js

在代码编辑器中的根目录下新建一个名为webpack.config.js的JS文件，将以下代码输入

const path = require("path")
module.exports = {
	entry: './src/main.js', //入口
	output: { //出口
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	mode: 'development', //开发模式
	devServer: {
		port: 3000, //设置端口号
		hot: true, //热更新
		contentBase: 'src', //默认打开文件位置
		open: true  //数据更改保存时自动打开
	}
}

7.在main.js文件中引入所需要的组件

（这里以Jquery·为例）

import $ from 'jquery'

$(function(){
    console.log('导入成功')
})

8.在Node.js中配置JQuery

npm install jquery

7.在Node.js中输入命令 npx webpack .\src\main.js -o .\dist\bundle.js

（在此之前，在之前新建的文件夹内新建一个文件叫“ dist”！！！）

8.在代码编辑器中的index.html中引用文件bndle.js即可完成效果。

<script src="/bundle.js"></script>

9.为了节省输入命令的方便在package.json文件中（代码编辑器）在最开始的对象中输入代码，可以在运行Node.js时节省时间

    "start": "webpack-dev-server"

10.如需要打包其他类型的文件如css、sass、less等可直接在官方文档找到相关操作

webpack官网

来自不成熟的小建议，希望能够帮到你