时间:2021-05-18
前言:
webpack4出了以后,一些插件变化很大,和之前的版本使用方式不一样,新手入坑,本篇将介绍如何从一开始配置webpack4的开发版本,对css,js进行编译打包合并生成md5,CSS中的图片处理,js自动注入html页,删除指定文件,提取公共文件,热更新等等。
安装
创建文件夹初始化
创建文件夹scripts 里面创建index.js文件
index.js
const s=()=>{ console.log('s init')}s()创建webpack.config.js文件
webpack.config.js
const path = require("path");module.exports = { entry: { index: "./scripts/index.js" //入口文件,若不配置webpack4将自动查找src目录下的index.js文件 }, output: { filename: "[name].bundle.js",//输出文件名,[name]表示入口文件js名 path: path.join(__dirname, "dist")//输出文件路径 }}执行webpack --mode development将会生成dist/index.bundle.js
创建index.html,并引入js
打开浏览器将会看到之前设置的js文件生效
对css,js进行编译打包合并生成md5
创建a.js,c.js,a.css,更改index.js
a.js
import acss from './a.css'import c from './c.js'const a={ init(){ console.log("a init bbbaaa") }, cinit(){ c.init() }}export default a;c.js
const c={ init(){ console.log("ccccc") }}export default c;a.css
body{ background-color: #6b0392;}index.js
import a from './a.js'import c from './c.js'const s=()=>{ a.init() a.cinit() c.init() console.log('s init')}s()配置webpack.config.js文件
安装style-loader, css-loader
执行webpack --mode development将会看到一个带md5值得js文件,将他引入html中
CSS中的图片处理
安装url-loader, file-loader
修改a.css 将一张图片放到scripts目录
body{ background-image: url("./timg.jpg"); background-color: #a748ca;}配置webpack.config.js文件
执行webpack --mode development将会看到dist中有一个images文件夹中有一张图片,打开index.html
js自动注入html文件
使用插件html-webpack-plugin,可以将生成的js自动引入html页面,不用手动添加
配置webpack.config.js文件
执行webpack --mode development 记得要讲之前手动引入的script删除,便可以看到dist那里自动生成一个index.html,打开便可以看到。
删除指定文件
使用插件clean-webpack-plugin,删除指定文件,更多配置,查看clean-webpack-plugin
npm install clean-webpack-plugin --save-dev配置webpack.config.js文件
const CleanWebpackPlugin = require('clean-webpack-plugin');//引入 plugins: [// 对应的插件 new HtmlWebpackPlugin({ //配置 filename: 'index.html',//输出文件名 template: './index.html',//以当前目录下的index.html文件为模板生成dist/index.html文件 }), new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录 ]执行webpack --mode development,可以看到dist目录被删除,又生成一个新的dist,之前的js文件已经被删除。
提取公共文件
我们可看到a.js和index.js都引入了c.js文件,为什么要提取公共代码,简单来说,就是减少代码冗余,提高加载速度。和之前的webpack配置不一样:
//之前配置// new webpack.optimize.SplitChunksPlugin({// name: 'common', // 如果还要提取公共代码,在新建一个实例// minChunks: 2, //重复两次之后就提取出来// chunks: ['index', 'a'] // 指定提取范围// }),//现在配置optimization: { splitChunks: { cacheGroups: { commons: { // 抽离自己写的公共代码 chunks: "initial", name: "common", // 打包后的文件名,任意命名 minChunks: 2,//最小引用2次 minSize: 0 // 只要超出0字节就生成一个新包 }, vendor: { // 抽离第三方插件 test: /node_modules/, // 指定是node_modules下的第三方包 chunks: 'initial', name: 'vendor', // 打包后的文件名,任意命名 // 设置优先级,防止和自定义的公共代码提取时被覆盖,不进行打包 priority: 10 }, } }},下载jq npm install jquery --save 在a.js,index.js引用 import $ from 'jquery' 输出$
生成3个js文件,执行webpack --mode development
热更新,自动刷新
我们将用到webpack-dev-serve,webpack-dev-server就是一个基于Node.js和webpack的一个小型服务器,它有强大的自动刷新和热替换功能。
安装webpack-dev-serve
npm install webpack-dev-serve --save-dev配置webpack.config.js文件
配置package.json
执行npm run dev 访问 http://localhost:9090/
随便修改任一文件便会自动刷新网站显示修改相应内容。
总结:
webpack4还有很多很多配置,例如css的拆分呀,less sass配置呀,js编译es6呀,多入口配置呀,生产环境配置,js没有使用的模块自动检测剥离等等,只能等下次有空在总结,感谢大家的观看,新手入坑,欢迎指出错误的地方。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言先前写了一篇webpack入门的文章《webpack入门必知必会》,简单介绍了webpack拆分、打包、压缩的使用方法。本文将在上篇文章的基础上进一步讲解在
本文实例讲述了webpack4.x开发环境配置方法。分享给大家供大家参考,具体如下:写这篇文章的初衷在于,虽然网络上关于webpack的教程不少,但是大多已经过
写在前面前面写了一篇有关webpack4的不完全升级指南以及在webpack3.x迁移的时候遇到的问题,有兴许可以看一下。0.参数介绍先对参数有一个大概的认识,
Javascript入门学习第一篇js基础Javascript入门学习第二篇js类型Javascript入门学习第三篇js运算Javascript入门学习第四篇
webpack@4.x的变化先来说下webpack4和之前版本里一些主要的变化:1、webpack不再支持nodev4,这是因为新的webpack和附属插件使用