1. 首页

菜逼新手webpack入门指南

webpack是前端模块化的打包工具,面试中的常考题,但是使用起来却不是很难,通过简单的配置便可实现功能,那webpack如何使用的呢?笔者也正处在学习中,若有不对还请指出,多多包涵。

菜逼新手webpack入门指南

webpack的安装

安装webpack必须先安装node环境。

查看自己的node版本


node -v 复制代码

全局安装webpack


npm install webpack -g 复制代码

局部安装webpack

--save-dev是开发时依赖,项目打包后不需要继续使用

webpack的配置

安装好了webpack之后,我们可以新建一个dist目录作为打包目录,下面建一个bundle.js文件用于存储打包代码

alt

之后我们便可在html文件中引入这个文件


<script src="dist/bundle.js"></script> 复制代码

之后我们可以在package.json中配置一下


"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, 复制代码

这样我们便可通过这个命令来使用webpack


npm run build 复制代码

而后我们来到webpack.config.js中配置一下便可成功使用webpack

alt


const path = require('path') const webpack = require('webpack') module.exports = { entry: './src/main.js',// 入口文件 output: { path: path.resolve(__dirname, 'dist'),// 所有输出文件的路劲 filename: 'bundle.js', // 打包的文件名 publicPath: '/dist' // 打包文件中关于url会自动加上/dist } 复制代码

webpack中css和less文件的处理

我们需要先通过npm安装一下


npm install --save-dev less-loader less 复制代码

npm install --save-dev css-loader 复制代码

而后我们需要对webpack.config.js进行配置


module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.less$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "less-loader", // compiles Less to CSS // name: 'img/[name].[hash:8].[ext]'//改变图片打包路劲和名字 }] } } 复制代码

其中的test的//是正则模板,\是对.进行解析,而.css和.less$是文件的后缀名

安装和配置之后便可写入这两个文件


body { background-color: red;} 复制代码

@fontSize: 50px;@fontColor: orange;body { font-size: @fontSize; color: @fontColor;} 复制代码

然后在main.js进行引入


require('./css/normal.css') require('./css/special.less')document.writeln('<h2>你好啊</h2>') 复制代码

打包之后便可在浏览器中查看html文件的变化

webpack中图片的处理

安装


npm install --save-dev url-loader 复制代码

同样我们需要引入图片


import img from './image.png' 复制代码

webpack.config.js


module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192, name: 'img/[name].[hash:8].[ext]'//改变图片打包路劲和名字 } } ] } ] } } 复制代码

如果图片大小小于limit时,会将图片编译成base64字符串形式

这里要注意图片的大小可以通过limit改变,代码中的8192就是8kb,如果图片大小大于limit,我们需要安装file-loader来加载大于limit的图片

如果大小小于limit,我们打包出来的图片会生成在dist目录下,但是名称是32位hash值,如果我们希望名称可以短些,可以通过代码来改成8位hash值,并且可以指定图片打包的文件夹位置


name: 'img/[name].[hash:8].[ext]' 复制代码

webpack中代码es6转成es5的babel

如果我们希望我们打包出来的代码是es5语法,我们可以通过安装babel来转译

安装


npm i --save-dev babel-loader@7 babel-core babel-preset-es2015 复制代码

配置


{ test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['es2015'] } } } 复制代码

之后我们便可发现bundle.js中的代码const变成了var

webpack使用vue的配置


{ test: /\.vue$/, use: ['vue-loader'] } 复制代码

但是就写这些是不够的,因为vue有两个不同的版本runtime-only和runtime-compiler,而我们使用的是前者,这个版本是不能使用template模板的,而div会自动被当成template模板,所以我们需要更换版本


resolve: { extensions: ['.js', '.css', '.vue'],// 引入时省略后缀 alias: {// 模块别名列表 'vue$': 'vue/dist/vue.esm.js' } } 复制代码

当然我们在引入vue文件时不加后缀会报错,所以我们可以添加一个extensions以便省略后缀

webpack中plungs的使用

plugins是一个webpack的附加插件,而其中的一个功能就是可以添加一些版权声明

配置


plugins: [ // 附加插件 new webpack.BannerPlugin('最终版权归aaa所有'), ] 复制代码

配置成功后我们便可在打包文件的头部看到

alt

那么如何将html文件打包到dist文件夹下呢?

我们同样需要安装一个东西


npm i html-webpack-plugin --save-dev 复制代码

之后在配置文件引入


const HtmlWebpackPlugin = require('html-webpack-plugin') 复制代码

plugins: [ // 附加插件 new webpack.BannerPlugin('最终版权归aaa所有'), new HtmlWebpackPlugin({ template: 'index.html' }) ] 复制代码

之后便可看到dist文件下多了一个index.html

alt

然后我们就可以只用这个html文件引入bundle.js,外面的html文件只需要一个div模板便可

webpack-dev-server搭建本地服务器

在开发阶段,其实我们没有必要每次都打包文件查看效果,我们可以搭建一个本地服务器以便开发使用

安装


npm i webpack-dev-server@2.9.3 --save-dev 复制代码

配置


devServer: { contentBase: './dist', inline: true } 复制代码

配置成功后,我们可以通过这个命令运行服务器


./node_modules/.bin/webpack-dev-server 复制代码

当然,我们也可以选择配置一下package.json增加一个dev然后运行简单的命令就可以启动服务器


"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "dev": "webpack-dev-server" } 复制代码

运行服务器的命令


npm run dev 复制代码

如果大家觉得输入命令后还要手动输入本地ip地址很麻烦,我们可以在dev后面加一个–open来使得命令输入后可以自动打开网页


"dev": "webpack-dev-server --open" 复制代码

这样我们便可以在开发阶段运行我们的代码了。

作者:codewhy
链接:https://juejin.im/post/5e80c589518825736b748301

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:菜逼新手webpack入门指南

链接:https://www.javascriptc.com/3932.html

« 字节跳动为什么选用 Flutter:并非跨平台终极之选,但它可能是不一样的未来
react hook + stamen store + pug实现纯函数无痛版react开发体验»
Flutter 中文教程资源

相关推荐

QR code