前言随我来,去看看webpack!(为时未晚)============》第一版(较浅显的知识,懂得可忽略本文)方向安装,起步搭建运行. (粗略代过)对于资源的管理,对于输出的管理. (举例介绍)本地开发 (基础服务)热更新=[模块热替换] (初步认识)1.初步构建mkdir webpack_demo && cd webpack_demo // 新建一个文件 并进入更目录 mkdir 是linux命令npm init -y // 初始一个packjage.json文件 -y 表示跳过询问步骤…//安装webpacknpm install webpack –save-dev // 添加webpack-cli依赖到"devDependencies"//webpack4.0+ 需要安装webpack-cli npm install webpack-cli –save-dev // 添加webpack-cli依赖到"devDependencies" //生成如下目录├── package.json ├── src //源目录(输入目录)│   ├── index.js ├── dist // 输出目录│   ├── index.html // 修改 dist/index.html< !DOCTYPE html><html lang=“en”> <head> <meta charset=“UTF-8”> <title>webpack_demo</title> </head> <body> <script src=“main.js”></script> //为什么是main.js下面会解释 </body></html>//修改src/index.js function component() { var element = document.createElement(‘div’); element.innerHTML = “整一个盒子” return element; } document.body.appendChild(component()); npx webpack (Node 8.2+ 版本提供的 npx 命令) node node_modules/.bin/webpack (8.2-版本)会将我们的脚本作为入口起点，然后 输出 为 main.js.打开dist/index.html 你将会看到 整一个盒子 几个字样~2.资源管理,输出管理.基本开发起步//生成如下目录 ├── package.json + |── webpack.config.js //webpack配置文件 ├── src //源目录(输入目录) │   ├── index.js ├── dist // 输出目录 │   ├── index.html 先介绍一个Lodash库 它是一个一致性、模块化、高性能的 JavaScript 实用工具库 模块化处理非常适合值操作和检测(说白了就是webpack用了我也试试…) lodash相关文档npm install lodash –save //非仅在开发的时候使用的依赖 就是需要打包到生产环境的包 不加-dev// src/index.jsimport _ from ’lodash’;function component() { var element = document.createElement(‘div’); element.innerHTML = _.join([’lodash’,‘webpack’],’’); //join将 array 中的所有元素转换为由’‘分隔的字符串 其它函数可以自己实践 return element; }打开index页面输出 loadshwebpack//webpack.config.js const path = require(‘path’); module.exports = { entry: ‘./src/index.js’, //入口 output: { //出口 filename: ‘main.js’, //打包之后脚本文件名称 path: path.resolve(__dirname, ‘dist’) //路径指向执行 js 文件的绝对路径 此处为/dist } };执行npx webpack –config webpack.config.js (把之前dist目录下main.js删除) 新的脚本生成(其实没多大变化..)// 配置一下package.json “scripts”: { “test”: “echo "Error: no test specified" && exit 1”, “build”: “webpack” //添加此行命令 下次执行打包就是 npm run build 相当于上面的npx webpack –config webpack.config.js },// 资源的配置 css 图片 js等等.. 举例 css 图片npm install –save-dev style-loader css-loader css的loadernpm install –save-dev file-loader file(图片)对象的 loader //生成如下目录 ├── package.json + |── webpack.config.js //webpack配置文件 ├── src //源目录(输入目录) │   ├── index.js + │   ├── index.css + │   ├── icon.jpg ├── dist // 输出目录 │   ├── index.html //修改webpack.config.js const path = require(‘path’); //path路径模块 module.exports = { entry: ‘./src/index.js’, //入口 output: { //出口 filename: ‘main.js’, path: path.resolve(__dirname, ‘dist’) }, module: { rules: [ { test: /.css$/, //检测正则匹配.css结尾的文件 use: [ //使用俩个loader ‘style-loader’, ‘css-loader’ ] }, { test: /.(png|svg|jpg|gif)$/, //正则匹配.png svg jpg gif结尾的文件 use: [ //使用file-loader ‘file-loader’ ] } ] } }; //修改src/index.css div{ color:red; } //修改src/index.js import _ from ’lodash’; import “./index.css”; import Icon from ‘./icon.jpg’; function component() { var element = document.createElement(‘div’); element.innerHTML = _.join([’loadsh’, ‘webpack’], ’ ‘); var myIcon = new Image(); myIcon.src = Icon; element.appendChild(myIcon); return element; } document.body.appendChild(component());npm run build(删除之前的dist目录下main.js) 你会看红字和图片 以上就是资源管理的简短介绍npm install –save-dev html-webpack-plugin 安装html-webpack-plugin模块 模块用到功能: 1： 动态添加每次compile后 js css 的hash 2: 可配置多页面 单页面 这些 3： 其它没涉及到npm install clean-webpack-plugin –save-dev 清除dist文件夹(每次删除麻烦了..)配置一下//修改目录 ├── package.json |── webpack.config.js //webpack配置文件 ├── src //源目录(输入目录) + │   ├── app.js + │   ├── print.js │   ├── index.css │   ├── icon.jpg ├── dist // 输出目录 │   ├── index.html //webpack.config.js ===============================================const path = require(‘path’);const HtmlWebpackPlugin = require(‘html-webpack-plugin’);const CleanWebpackPlugin = require(‘clean-webpack-plugin’);module.exports = { entry: { app: ‘./src/index.js’, print: ‘./src/print.js’ }, output: { filename: ‘[name].bundle.js’, path: path.resolve(__dirname, ‘dist’) }, plugins: [ new CleanWebpackPlugin([‘dist’]), new HtmlWebpackPlugin({ title: ‘webpack_demo’ }) ], module: { rules: [ { test: /.css$/, use: [ ‘style-loader’, ‘css-loader’ ] }, { test: /.(png|svg|jpg|gif)$/, use: [ ‘file-loader’ ] } ] }};//修改src/index.js =================================================== import _ from ’lodash’; //引入lodash模块 import “./index.css”; // index.css import Icon from ‘./icon.jpg’; // 图片 import printMe from “./print.js” // printJS function component() { var element = document.createElement(‘div’); //创建一个元素 element.innerHTML = .join([’loadsh’, ‘webpack’], ’ ‘); // lodash中.join方法 var myIcon = new Image(); //创建一个图片 myIcon.src = Icon; //src赋值 element.appendChild(myIcon); //追加图片 var btn = document.createElement(‘button’); //创建按钮 btn.innerHTML = ‘Click me and check the console!’; //内容赋值 btn.onclick = printMe; //添加事件 element.appendChild(btn); //追加元素 return element; } document.body.appendChild(component()); //追加元素到body中 //修改src/print.js ========================================== export default function printMe() { console.log(‘from print.js’); } npm run build 会发现基本webpack的配置之后 ,有点模样(意思)了 打开页面index.html正常访问3.本地开发npm install –save-dev webpack-dev-server “webpack-dev-server” 为你提供了一个简单的 web 服务器，并且能够实时重新加载 //修改webpack.config.jsconst path = require(‘path’);const HtmlWebpackPlugin = require(‘html-webpack-plugin’);const CleanWebpackPlugin = require(‘clean-webpack-plugin’);const webpack = require(‘webpack’);module.exports = { entry: { app: ‘./src/index.js’ }, output: { filename: ‘[name].bundle.js’, path: path.resolve(__dirname, ‘dist’) }, devServer: { contentBase: ‘./dist’ }, plugins: [ new CleanWebpackPlugin([‘dist’]), new HtmlWebpackPlugin({ title: ‘webpack_demo’ }) ], module: { rules: [ { test: /.css$/, use: [ ‘style-loader’, ‘css-loader’ ] }, { test: /.(png|svg|jpg|gif)$/, use: [ ‘file-loader’ ] } ] }};//修改package.json…“scripts”: { “test”: “echo "Error: no test specified" && exit 1”, “start”: “webpack-dev-server –open”, //start命令 “build”: “webpack” }, … npm run start 本地起了8080端口的服务,你也可以看到自己的页面4.热更新//修改webpack.config.jsconst path = require(‘path’);const HtmlWebpackPlugin = require(‘html-webpack-plugin’);const CleanWebpackPlugin = require(‘clean-webpack-plugin’);const webpack = require(‘webpack’);module.exports = { entry: { app: ‘./src/index.js’ }, output: { filename: ‘[name].bundle.js’, path: path.resolve(__dirname, ‘dist’) }, devServer: { contentBase: ‘./dist’, hot: true }, plugins: [ new CleanWebpackPlugin([‘dist’]), new HtmlWebpackPlugin({ title: ‘webpack_demo’ }), new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ], module: { rules: [ { test: /.css$/, use: [ ‘style-loader’, ‘css-loader’ ] }, { test: /.(png|svg|jpg|gif)$/, use: [ ‘file-loader’ ] } ] }}; npm run start 运行http://localhost:8080/ 然后你去修改print js的console(或者添加其他代码) 会发现命令行输出updated. Recompiling… 字样 这就是简单的实现了热更新最后本文只是大概从几个demo来对于webpack的基础概念 入口entry 出口 output loader plugins mode(没有直面涉及)几大模块的梳理于实践,让大家对于webpack不在那么陌生!后续文章会从更深入的角度去学习webpack! 暂定下周1 发表文章(内容 详细介绍hot 实现一个简易的vue-cli等等)demo的代码我会同步github