Webpack

文章目录

Webpack2.介绍https://webpack.js.org/2.1起步2.3 配置`webpack.config.js`

2.介绍https://webpack.js.org/

是什么 打包工具js 模块打包之后就可以在浏览器运行 做什么 js、css、图片、less、sass、ES6转ES5(babel) 的打包开发工具： http服务器代码改变，自动刷新浏览器压缩代码

https://www.webpackjs.com/guides/getting-started/#

webpack 中文文档

2.1起步

全局安装：

npm install -g webpack

安装再全局的 webpack 打包的时候使用的是你安装在自己电脑上的 webpack ，如果去到别人电脑，可能发生版本冲突问题。那么久设计到兼容性的问题。

而且如果对方没有在全局安装 webpack 则就无法打包。

所以，为了解决以上问题，我们更推荐把 webpack 安装到本地项目中。这样的话项目到哪里， webpack 就跟到了哪里。(打包工具随着项目走);

我们安装的时候把webpack 安装到开发一来(–save-dev)中，因为webpack只是一个打包工具，项目如果需要上线，上线的是打包的结果，而不是这个工具。 所以我们为了区分核心包依赖和开发工具依赖，这里通过 --save 和 --save-dev 来区分。

本地安装(推荐)：

npm install --save-dev webpack #简写是 -D

对于安装到项目中的 webpack需要单独配置 npm scripts 来使用。

在package.json 里的scripts 配置别名。

然后通过 npm run打包

npm run a # start比较特殊 可以不用run npm start # 打包构建 这里使用的 webpack 就是项目中安装的 webpack npm run build

---

准备目录结构：

打包：

webpack .\js\main.js -o .\js\bundle.js

webpack 模块入口文件路径 模块出口文件路径

最后记得把index.html 的脚本引用改为结果文件的路径

一般：

dist 为打包后的文件

src 为源码

2.3 配置webpack.config.js

最基本的配置项：

// 该文件其实最终要再node 环境下执行的 const path = require('path'); // 导出一个具有特殊属性配置的对象 module.exports = { // 入口文件模块路径 entry: './src/main.js', output: { // 转换后的文件路径和文件名 // 这里一定要注意，path要绝对路径 path: path.join(__dirname, './dist/'), filename: 'bundle.js' } }

打包：

webpack # 会自动读取webpack.config.js 文件作为默认的配置文件 # 也可以通过 --config 参数手动配置文件

---

点击前往Vue（下）部分