Webpack
打包Javascript应用程序的静态模块打包器
-
入口
从那个js模块入口开始打包,构建内部依赖
-
出口
将打包的js输出到指定出口环境位置
-
Loader
处理非JavaScript文件,将所有类型的文件转换为webpack能够处理的有效模块
-
plugins
插件实现loader不能解决的类型,优化打包压缩
-
模式
开发模式
生产模式
安装方法
- 本地安装
npm install --save-dev webpack npm install --save-dev webpack-cli
- 全局安装
npm install --global webpack
应用实例
在开始前要检验Node.js
配置环境
npm -v node -v
在终端中应该显示出版本号
新建一个文件夹mkdir webpack_demo
在终端窗口使用cd webpack_demo
命令进入到新建的文件夹下
初始化一个项目 npm init -y
安装webpack
npm install webpack webpack-cli --save-dev
这里安装了webpack
与webpack-cli
(命令行运行webpack的工具) 因为4版本往上webpack-cli
已经独立出来了
安装完成后项目文件夹下会多一个node_modules
文件夹和package.json
文件
在package.json
文件里加上一句话
{ "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", + "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.0.1", "webpack-cli": "^2.0.9", "lodash": "^4.17.5" } }
这样的话方便我们使用npm命令打包
新建一个专门用来保存代码的文件夹src
,在它下面创建一个index.js
文件
在里面我们就简单的写一句话console.log("hello");
然后我们在webpack_demo
文件夹下新建一个webpack
的配置文件webpack.config.js
const path = require('path'); module.exports = { entry: './src/index.js', //入口 output:{ //出口 filename:'bundle.js', //打包完的js文件名称 path:path.join(__dirname,'./dist'),// 路径 } };
在终端运行npm run build
命令
运行完成后 我们的文件目录如下图所示
dist
文件夹下的bundle.js
就是我们打包出来的文件夹
bundle.js
console.log("hello");
上述是一个简单打包JS的例子,下面我们将Sass、HTML、JS打包
应用loader
Scss是预编译文件,编译完成后就是CSS文件,CSS样式一旦多了就比较难维护,非常不方便,下面简单介绍一下两者区别
#Scss nav{ ul{ margin: 0 padding: 0 } li{ display: inline-block } a{ display: block } } #CSS nav ul { margin: 0; padding: 0; } nav li { display: inline-block; } nav a { display: block; }
从上面可以就可以看出来Scss比CSS方便多了,其中Scss 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。
因为webpack就是JavaScript写的,所以在打包非JS文件的时候需要loader进行转换,这样的话,我们就可以在JavaScript中引入CSS文件
npm install --save-dev css-loader npm install --save-dev style-loader npm install --save-dev sass-loader npm install --save-dev node-sass
安装node-sass
比较复杂,需要有Python环境和Visual Studio才可以,具体的可以参考https://github.com/nodejs/node-gyp#on-windows
Python的安装教程可以看菜鸟教程Python安装教程,在使用的时候推荐安装Anaconda包,他里面集成了很多常用的第三方库,IDE的话首选Pycharm,这个网上有很多教程,自己可以搜一搜,下载的时候太新或者太旧的版本都不太好,所以下载3.6、3.7版本的比较稳定。
VS的话直接去官网下载就行了https://visualstudio.microsoft.com/zh-hans/downloads/
如果没有成功安装node-sass
也没有关系,到时候直接写CSS文件就行了
修改配置文件
webpack.config.js
const path = require('path'); module.exports = { entry: './src/index.js', output:{ filename:'bundle.js', path:path.join(__dirname,'./dist'), }, + module:{ + rules: [ + { + test:/\.(scss|sass)$/, + use: ['style-loader','css-loader','sass-loader'] + } + ] + } //如果没有安装好node-sass就使用下面的语句, + module:{ + rules: [ + { + test:/\.css$/, + use: ['style-loader','css-loader'] + } + ] + } };
修改后的语句意思是指示webpack对于.scss
和.sass
文件使用sass-loader
在src
文件夹下新建index.scss
文件(没有noded-sass创建css文件)
index.scss
body{ background:green; //背景颜色设为绿色 }
运用插件plugins
插件的目的是解决loader无法实现的其他事
接下来安装HTML
插件
npm install --save-dev html-webpack-plugin
在src
文件下新建一个index.html
文件
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>template</title> </head> <body> Hello </body> </html>
在配置文件webpack.config.js
中导入插件
const path = require('path'); + const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output:{ filename:'bundle.js', path:path.join(__dirname,'./dist'), }, module:{ rules: [ { test:/\.(scss|sass)$/, use: ['style-loader','css-loader','sass-loader'] } ] }, + plugins:[ + new HtmlWebpackPlugin({template: './src/index.html'}) + ] };
命令行输入npm run build
运行编译
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-30RyayKd-1605595693406)(flytm-figure.oss-cn-beijing.aliyuncs.com/img/image-2…
运行完后的目录结构
如果之前dist
文件夹下已经有了index.html
的话会被覆盖的,打开后会显示如下的页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iDMGqwKi-1605595693407)(../images/image-20201117000215805.png)]
按f12
可以看见工作台输出的小写hello
这个就是JavaScript
生成的,页面绿色是我们写的scss
文件设置的样式,大写的Helllo
是我们在html
中写的,到此算是小入门了,但是我们肯定不是一次就能把网站写好的,总不能一直run build
,所以接下来运用热模块实时更新我们的项目
模块热替换
首先要安装热模块的插件
npm install --save-dev webpack-dev-server
在配置文件webpack.config.js
中引入插件
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); +const webpack = require('webpack'); module.exports = { entry: './src/index.js', output:{ filename:'bundle.js', path:path.join(__dirname,'./dist'), }, module:{ rules: [ { test:/\.(scss|sass)$/, use: ['style-loader','css-loader','sass-loader'] } ] }, + devServer: { + hot: true + }, plugins:[ new HtmlWebpackPlugin({template: './src/index.html'}), + new webpack.HotModuleReplacementPlugin() ] };
在脚本文件package.json
中引入webpack-dev-server
"scripts": { "build": "webpack", + "hot": "webpack-dev-server" }
运行npm run hot
命令
发现报错
上网查了一边发现是webapck-cli
版本不兼容的问题
所以卸载当前的4.x的 webpack-cli,安装3.x的版本
npm uninstall webpack-cli npm install webpack-cli@3 -D
然后输入npm run hot
在本地就可以浏览了,本地的地址一般是http://localhost:8080/
我的是81是因为80端口被占用了
打开后,我们直接修改src/index.html
在body
标签内随便加几句,ctrl + s
保存,然后刷新一下浏览器就自动更新了