webpack入门配置步骤详解

1、初始化

1、npm install webpack webpack-cli webpack-dev-server --g 全局安装必要的第三方插件

2、mkdir config dist src 新建三个文件夹

3、npm init -y 初始化package.json

4、在 src 文件夹中，新建 main.js；在 config 文件夹中，新建 webpack.dev.js

配置webpack.dev.js

在 package.json加入快捷命令

执行npm run dev

此时可以看到 dist 文件夹下面已经有bundle.js了

这里特别注意下：文件目录中不要包含中文，否则会引起很多的问题

2、多文件入口

如果存在多文件入口，则需要1添加入口文件、2配置入口文件，3修改出口文件的filename为[name].js

执行npm run dev 后

在 dist 文件夹中出现了同名的两个js文件

[name] 会根据入口文件的名称，打包成相同的名称，有几个入口文件，就打包几个文件

3、配置webpack-dev-server

作用：配置本地的服务器，它的基本配置是

这个时候如果执行npm run dev会报错，需要在package.json里配置

然后执行npm run server就可以跑起来了

我们可以填写下文件，看下输出效果
1、在dist文件夹下新建index.html，引入2个js文件

2、在js文件中分别写点东西

3、再次执行npm run server，打开localhost:9000

4、引入CSS

webpack 中的 loaders 是可以将浏览器无法识别的文件转化，比如可以把 SASS/LESS 文件的写法转换成 CSS，可以把ES6、ES7转换成ES5，首先我们在src文件夹下创建index.css文件并在入口文件中引入：

执行命令，发现报错

这是因为在webpack中想要打包css，通常需要加载 style-loader 和 css-loader 这2个加载器，它们的作用是：

• css-loader：加载css文件
• style-loader ：动态创建style标签，塞到html的head标签里；

安装依赖：
cnpm install style-loader css-loader --save-dev

配置loaders：

执行命令，显示成功：

5、插件--压缩JS

webpack内置 uglifyjs-webpack-plugin的插件，直接引入配置

再次执行命令，文件已被压缩

6、插件--打包HTML

之前的HTML是我们手动写的，现在删除之前的JS引入，移动至src文件夹下面

现在的目标是：webpack 让 html 自动引入js，并打包到 dist 文件夹下，这里就要引入 html-webpack-plugin
安装依赖： cnpm install --save-dev html-webpack-plugin
配置plugins：

执行命令，可以看到 dist 文件夹下面已经有打包好的html了

7、SASS文件的打包

安装依赖：cnpm install node-sass sass-loader --save-dev

在原来的基础上，新增配置

新建sass文件

引入sass文件

执行命令，效果生效：

8、增加babel支持

babel主要是用于将es6/es7转为浏览器可识别的js
安装依赖：cnpm install --save-dev babel-core babel-loader babel-preset-env

配置加载器：

编写文件：

打包代码执行成功

番外话

webpack的核心概念就是，一切皆模块，从一个入口开始，不停的分析解析最终获取到一个浏览器可识别的js文件
核心是，解析浏览器无法识别的文件的loaders，帮助自动化打包构建的插件plaugins
剩下的就是按要求进行配置的

部分基础知识点

__dirname表示当前文件所在的目录
__filename表示正在执行脚本的文件名
path.resolve([...paths]) 可以将路径或者路径片段解析成绝对路径，...paths是传入的字符串参数，是路径序列或者路径片段

本文内容主要摘自于 “https://www.jianshu.com/p/6712e4e4b8fe”