webpack的那些事儿
栏目: JavaScript · 发布时间: 5年前
内容简介:不管是vue-cli还是react-sprite,其实都是基于webpack实现的。试想,如果没有脚手架,你自己能搭一个吗?看完这篇博客,让你明白webpak都有些什么东西上面的build里的bundle.js就是打包后生成的文件。webpack.config.js就是上面的代码,postcss.config.js就是postcss-loader需要的配置文件
不管是vue-cli还是react-sprite,其实都是基于webpack实现的。试想,如果没有脚手架,你自己能搭一个吗?看完这篇博客,让你明白webpak都有些什么东西
webpack其实没有那么神奇,就是一个打包工具,而且它本身只能打包js,而图片,css,html其实都是依靠它的loader和plugin完成的。
webpack.config.js文件,看名字就知道它是webpack的配置文件。该文件一般包括:入口entry,出口output,loader和插件plugin
const path = require('path') module.exports = { mode: 'development', entry: './src/1.js', output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js' }, module: { rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }] }}复制代码
来解析下上面的代码,
第一行的path其实是node的核心模块,webpack其实就是基于node的产物,你的电脑要是没有node,你也装不了webpack的。
接下来会向外暴露:
mode可以指定是development环境还是production环境。脚手架没有这一项,因为它已经分了dev.conf.js和prod.conf.js。
entry指定你要打包的入口文件,
output指定你要打包到哪和打包文件的名字。
module模块一般用来设置你代码中要打包的css,图片之类的loader。
上面就是解析css的loader,肯定有人好奇为什么会有三个:
style-loader:将会创建style标签,将样式放到页面中
css-loader:将css代码转成js能接受的字符串
post-loader:寻找那些需要浏览器兼容加前缀的样式,比如-webkit-,你没加,但loader会帮你补全,是不是很省心。这个loader有点不一样的是他依赖一个autoprefixer的配置文件。
这也就能解释为什么你的项目中引入less,sass之类的扩展语言要写三个loader。
注意:这三个loader的顺序不能错,loader是从右往左执行的。 接下来的devtool不是必须的,他会保留代码编译前的模样,方便调式,上线一定要关掉,不然会让你打包的大小增大很多。
自己配置一个webpack:
上面的build里的bundle.js就是打包后生成的文件。webpack.config.js就是上面的代码,postcss.config.js就是postcss-loader需要的配置文件
//1.js import '../css/1.css' console.log(111)复制代码
//postcss.config.js const autoprefixer = require('autoprefixer') module.exports = { plugins: [ autoprefixer ]}复制代码
//1.css #div1 { width: 200px; height: 200px; transition: 1s all ease; background-color: rgb(148, 148, 148); } #div1:hover { transform: rotateY(60deg) }复制代码
此时,在命令行中运行webpack,就会生成上面的build文件夹,打开index.html,你会发现,这就是我们自己写的css和js。这样就完成了打包,是不是很简单?
我们可能还会好奇webpack为什么能够起一个服务环境,实现热更新等功能,这就不能不说webpack-dev-server了。
实现热更新:
这个不需要我们配置,但需要依赖,所以我们要:
npm i webpack webpack-cli webpack-dev-server复制代码
注意:这里的启动命令要在package.json文件里配置
{ "scripts": { "dev": "webpack-dev-server --progress --hot", }, "devDependencies": { "autoprefixer": "^9.5.1", "css-loader": "^2.1.1", "postcss-loader": "^3.0.0", "style-loader": "^0.23.1", "webpack": "^4.31.0", "webpack-cli": "^3.3.2", "webpack-dev-server": "^3.3.1" }}复制代码
此时,你在命令行输入npm run dev,会发现你的项目已经监听8080端口啦
如果要配置webpack-dev-server,也可以在webpack.config.js中进行配置:
devServer:{ hot: true, //设置热更新 host: 'localhost', //可选,ip port: 3000, //可选,端口 contentBase:path.resolve(__dirname,'build'), //可选,基本目录结构 compress: true, //可选,压缩 proxy: { '/api': { target: 'http://localhost:8081', pathRewrite: {'^/api': '/data'} //本来是反向代理去http://localhost:8081/api,rewrite之后就反向代理去http://localhost:8081/data } }}复制代码
到目前为止,我们生成的index.html文件其实还是本地文件,那么我们如何生成一个服务器访问的html文件呢?这里就要引入html-wepack-plugin插件了。
npm i html-webpack-plugin -S复制代码
plugins: [ new HtmlWebpackPlugin({ template: './build/index.html' }), new webpack.HotModuleReplacementPlugin({}) ]}复制代码
这里我把我build文件夹下的index.html。
到这里,一个小小的脚手架雏形其实就有了。剩下的就是配置各种各样的loader啦
因为loader的配置都是大同小异,这里就不做过多介绍。
具体可以戳这里 www.webpackjs.com/loaders/
附上完整的webpack.config.js
const path = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', entry: './src/1.js', output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js' }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] } ] }, devServer: { host: 'localhost', //可选,ip port: 3000, //可选,端口 contentBase: path.resolve(__dirname, 'build'), //可选,基本目录结构 compress: true, //可选,压缩 hot: true }, plugins: [ new HtmlWebpackPlugin({ template: './build/index.html' }), new webpack.HotModuleReplacementPlugin({}) ]}复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。