一、什么是以及为什么要使用webpack
现在的网页功能越来越丰富,所需要的JavaScript和模块也会很多,为开发更加简洁,出现了以下方法,如模块化,scss,typescript等。
但有些语法是浏览器无法识别的。所以需要用到webpack。
WebPack是模块打包器,它会将浏览器不能支持不能识别的语言语法,打包转换成浏览器可识别的语法,如(Scss,TypeScript等)。
二、webpack 与 gulp 的区别
两者并无太多的可比性
1、webpack是为模块化提供解决方案;
2、gulp是前端自动化构建工具。
三、如何使用webpack
注:此例以webpack@3.5.3版本为例
另,热更新 服务器webpack-dev-server@2 依托以上版本
实例:
1、全局安装webpack
cnpm install webpack@3.5.3 -g
或
npm install webpack@3.5.3 -g
2、新建一个文件夹,并初始化文件
npm init -y
之后,文件夹内会出现一个package.json 的文件
3、局部安装webpack
cnpm install webpack@3.5.3 --save-dev
之后,文件夹会出现一个node_modules 的文件
4、新建webpack.config.js文件夹
5、创建 src 和dist 文件夹
6、src入口文件中新建index.js文件(书写需要的内容)如:
console.log(222)
7、配置webpack.config.js文件(配置基础部分)
// 引入核心模块
const path = require('path');
// __dirname:当前文件夹的绝对路径
// path.join:连接两个参数,生成新的路径
const PATH = {
app:path.join(__dirname,'./src/index.js'),
build:path.join(__dirname,'./dist')
}
// 测试,用node webpack.config.js 运行
// console.log(PATH.app)
// webpack配置项
module.exports = {
entry:{
// 入口路径,app名字决定下面出口文件的名字
app:PATH.app
},
output:{
filename:"[name].js", //生成的出口文件名字为app.js
path:PATH.build
}
}
cmd命令中,运行打包命令:
webpack
8、在dist中会生成一个app.js文件,内容如下
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
console.log(222)
/***/ })
/******/ ]);
恭喜!至此,一次简单的打包完成!
但需要注意,以上打包方式仅适合4.0版本以下。4.0以上会有简单的变化。
9、当浏览器遇到不能识别的代码时,需要用到loader
提前安装loader,在代码中解释
处理css的loader
cnpm install --save-dev style-loader css-loader sass-loader node-sass
处理js的loader
cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
配置如下:
// 引入核心模块
const path = require('path');
// __dirname:当前文件夹的绝对路径
// path.join:连接两个参数,生成新的路径
const PATH = {
app:path.join(__dirname,'./src/index.js'),
build:path.join(__dirname,'./dist')
}
// 测试,用node webpack.config.js 运行
// console.log(PATH.app)
// webpack配置项
module.exports = {
entry:{
// 入口路径,app名字决定下面出口文件的名字
app:PATH.app
},
output:{
filename:"[name].js", //生成的出口文件名字为app.js
path:PATH.build
},
// 需提前配置好,解决浏览器不能识别的语法
module:{
rules:[
{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets:['@babel/env','@babel/react']
}
}
},
{
test:/\.(css|scss)$/,
use:['style-loader','css-loader','sass-loader']
}
]
}
}
cmd命令中,运行打包命令:
webpack
在dist 下新建一个index.html 文件,并引入app.js,即可实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html> <script src="./app.js"></script>
现在,即可完成对不识别代码的识别,如ES6转为ES5等
以上为手动添加index,html文件
生成html模板(cmd命令)
插件
cnpm install html-webpack-plugin --save-dev
webp新加plugins 配置
// 引入核心模块
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
// __dirname:当前文件夹的绝对路径
// path.join:连接两个参数,生成新的路径
const PATH = {
app:path.join(__dirname,'./src/index.js'),
build:path.join(__dirname,'./dist')
}
// 测试,用node webpack.config.js 运行
// console.log(PATH.app)
// webpack配置项
module.exports = {
entry:{
// 入口路径,app名字决定下面出口文件的名字
app:PATH.app
},
output:{
filename:"[name].js", //生成的出口文件名字为app.js
path:PATH.build
},
// 需提前配置好,解决浏览器不能识别的语法
module:{
rules:[
{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets:['@babel/env','@babel/react']
}
}
},
{
test:/\.(css|scss)$/,
use:['style-loader','css-loader','sass-loader']
}
]
},
// 插件在plugins中使用
plugins:[
// HtmlWebpackPlugin 为构造函数
new HtmlWebpackPlugin({
// 生成的文件名称
filename:'index.html',
// 模板文件
template:'./index.html',
})
]
}
10、减少每次手动运行webpack,需要用热更新
cnpm install webpack-dev-server@2 --save-dev
在package.json 的 script中添加
"scripts": {
"dev":"webpack-dev-server --open",
"test": "echo \"Error: no test specified\" && exit 1"
},
然后,cmd中运行
npm run dev
即可完成实时更新。。。。
注src 下的index.js 可导入其他文件,如:body.css,
index.js:
import * as obj from './modeleW'
import './body.css'
console.log(222)
console.log(obj.name)
console.log(obj.age)
console.log(obj.sign)
body.css:
body{
background: red;
}
手敲不易,肩膀疼,,,,,