捂脸~~~~ 都 9102 年了, 现在还来谈 webpack 的配置, 是不是有点不合适哪(我不管!), 基于 vue-cli 或者 create-react-App 生成的项目, 也已经一键为我们配置好了 webpack, 看起来似乎并不需要我们深入了解. 不过呢, 自己尝试去搭建一下 webpack 的 开发环境玩一下也是极好的~~
webpack: 模块化兼打包工具, 可以把复杂得程序细化为小的文件, 通过一个入口文件, 找到你的项目得所有依赖的文件使用 loaders 处理它们, 最后打包成为一个 (或者多个) 浏览器可以识别的 JavaScript 文件.
作用:
1, 模块化, 让我们把程序可以细化为细小的文件;
2, 类似于 TypeScript 这种在 JavaScript 基础上拓展的开发语言: 使我们能够实现目前版本的 JavaScript 不能直接使用的特性. 并且之后还能转换为 JavaScript 文件是浏览器可以识别.
3, 可以使用, Less,SCSS 等 SCSS 预处理器.
webpack 与 gulp 区别:
webpack 是一种模块化的解决方案, 可以把各种资源都作为模块来使用或处理.
gulp 是一种能能够优化前端的开发流程的工具, 侧重于前端开发得整个过程得控制管理, 通过一系列插件将原本复杂繁琐得任务自动化, 并不能将除了 JS 之外的资源模块化.
webpack 的优点使得 webpack 在很多场景下可以替代 gulp 类的工具.
webpack 的基本配置项:
入口文件; entry
出口文件; output
module:CSS,JS,img 都叫做 module, 打包在 module 中进行.
rules 就是 louders 的配置项.
pulgins:webpack 的插件.
resolves:webpack 的配置项.(例: 在 vue 中有 @可以代表 src, 能够通过 @代表 src 就是因为在 webpack 中进行了配置)
webpack 的基本使用:
1, 全局安装:
NPM install webpack@3 -g
2, 创建文件夹 - 初始化:
NPM init -y
3, 局部安装 webpack:
NPM install webpack@3 -S
4, 在文件夹下创建 webpack.config.JS 文件:
5, 创建 src 目录在其中创建 main.JS
6, 插件 - htmlwebpackplugin-(在 dist 中生成一个引入了 JS 的 HTML 文件)
安装: NPM install HTML-webpack-plugin -S
使用方法: 在文件中引入后;
在 plugins 中 new 一个 htmlwebpackplugin 对象
有两个必传的参数:
- ,template(模版)
- ,filename:(生成文件的名称)
不必须参数;
1,title(在 HTML 中使用 ejs 模版型语法)
7, 插件 - 创建服务器 - webpackdevserver(开启服务实现热更新)
安装: NPM install webpack-dev-server@2 -S
使用方法: 在 package.JSON 的 scripts 中增加指令 "dev":"webpack-dev-server"(启动一下)
8, 插件 - 打包 JS 文件 -
安装: NPM install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
9, 插件 - 打包 CSS,SCSS 文件 -
安装: NPM install --save-dev style-loader CSS-loader Sass-loader node-loader
webpack.config.JS 文件内容如下:
好啦 就是这个样子啦, 略糙, 见谅~
来源: http://www.jianshu.com/p/759cf6c08a23