Webpack小结

最新推荐文章于 2023-09-11 10:32:26 发布

爬到树上看月亮

最新推荐文章于 2023-09-11 10:32:26 发布

阅读量115

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/qq_41702466/article/details/110481936

版权

前言
初学webpack，了解一下什么是webpack，然后进行基础学习如何使用webpack。

什么是webpack

就目前而言我所知道的webpack是一个对项目模块儿或者资源进行打包压缩，因此项目体积变小，能提高运行效率的一个静态模块打包工具。

引用官网的原话：本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。

我们从webpack官网开始页面可知道，webpack从 .js 文件深入加载、解析、编译文件，层层深入到每一个引用过的文件，不管嵌套了多少层，webpack都能对其进行打包。
在这里插入图片描述

初步使用webpack

一、webpack核心概念

        也许你已经知道使用webpack你可能会用到webpack.config.js配置文件，那么，这些配文件里主要有哪些内容呢。（因为小编一开始最先接触的是vue框架，其中vuex中也有一些主要的五个元素，所以对这并不感到陌生）webpack核心概念：
        - entry（入口）
        - output（出口）
        - loader
        - plugin（插件）
        - mode（模式）
        - browser compatibility（浏览器兼容性）
        - environment（环境）

针对mode、browser compatibility、environment的补充

mode
通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

module.exports = {
  mode: 'production'
};

browser compatibility
webpack 支持所有符合 ES5 标准的浏览器（不支持 IE8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持旧版本浏览器，在使用这些表达式之前，还需要提前加载 polyfill。
environment
webpack 运行于 Node.js v8.x+ 版本。

三、webpack实例

接下来用实例来讲述webpack的这几个核心概念

首先讲一个最简单的例子，我们知道每个项目模块中不可能只有js文件，那么我们先来看看，webpack对js是如何处理的呢：

目录结构：

node_modules
src
assets
images
background.png

main.js
main.scss
main.css

main.html

index.html
index.js
package.json
package-lock.json
webpack.config.js

//了解到path模块是node.js中处理路径的核心模块，可以很方便的处理文件路径的问题
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin')
moudle.exports = {
//webpack入口js，提示webpack应该用哪个js作为起始
	entry :'./index.js',
	//输出，告诉webpack在哪输出它所打包后的文件，以及如何命名这些文件，默认值是./dist/main.js。其他文件默认放在./dist文件下，跟main.js同级
	output : {
		//__dirname:当前目录，Node.js的语法，这句代码的意思就是将目录拼凑起来，变成绝对路径
		path: path.resolve(__dirname, 'dist'),　
		//
		filename : 'js/[name].js'
	},
	//因为webpack只认识js和json文件，那么其他文件就由特定的loader来帮他解析，所以，此时需要下载loader，如何下载，请往后看
	module:{
		rules:[
			{//指定babel-loader来解析新一代的js语法
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {presets: ['@babel/preset-env']}
                }
            }
		]
	},
	//插件，在此安装一个html-webpack-plugin 插件，这个插件将会作为模板来使用，目的是将项目中的所有页面打包到指定模板页面中
	//npm i html-webpack-plugin --save-dev    安装到开发者环境中
	plugins : [
		new htmlWebpackPlugin({
			//对他进行传参
			template: "./index.html",//模板文件路径
            filename: "index.html",//生成的模板名字
            inject: 'body'//将js标签插入到模板body里
		})
	]
}

然后我们开始在main.html为项目简单的写一些东西

<!--main.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="out_div">
        <div class="in_div">

        </div>
    </div>
</body>
</html>

为页面设置css

/*main.css*/
html,body{
    padding: 0;
    margin: 0;
    background-color: antiquewhite;
}

div{
    border: 1px solid black;
}

我们也可以在scss文件里设置一些属性

/*main.scss*/
.out_div{
  width: 50vw;
  height: 50vw;
  border-radius: 50vw 50vw;
  display: flex;
  justify-content: center;

  .in_div{
    align-items: center;
    width: 25vw;
    height: 25vw;
    border-radius: 25vw 25vw;
    background-image: url("./assets/images/bind.png");
  }
}

最后在main.js里把main.html、main.css、main.scss导入，然后输出，这样webpack的入口文件才能获取到该js的输出内容

//main.js
import mainHt from './main.html'
import './main.css'
import './main.scss'
import './insertCss.css'

function contentMain(){
    return {
        name:'main',
        tpl : mainHt
    }
}

export default contentMain()

为了把上面做的准备内容放到模板html里也就是根目录下的index.html里，我们在index.html里添加一个id，这样我们就可以获取到这个标签

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">

    </div>
</body>
</html>

接下来在入口js添加一些内容，目的是为了引入这些文件。

//温馨提示: 一定要把路径的./加上，否则可能会报错
import main from './src/main'

function app(){
    let doc = document.getElementById('app')
    console.log(document.getElementById('app'))
    doc.innerHTML=main.tpl
}
//调用这个方法
new app()

仅仅是这样还不能打包，因为img里的图片和src下的css文件webpack并不认识，所以要用loader来帮他打包。我们要在rules里继续添加新的loader

rules:[
	{
		test: /\.(png|jpeg|jpg|svg|gif)$/,
        loader: 'file-loader',
        options: {
        	name:'images/[name].[ext]'
        }
    },
    {
                test: /\.(css|scss)$/,
                exclude: /(node_modules|bower_components)/,
                use: [
                    {loader: "style-loader" },
                    {loader: "css-loader?importLoaders=1"}, 
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    require('autoprefixer')({
                                        browsers:'last 5 version'
                                    })
                                ],
                            }
                        }
                    },
                    {loader: "sass-loader"} // 将 Sass 编译成 CSS
                ]
            },
    {test: /\.html$/, loader: 'html-loader'},
]

注意：在处理css文件或者scss文件的过程中，我们有时会有这么一个要求，就是添加前缀，为了满足这样的要求，我们需要为他添加一个postcss-loader，PostCSS 的主要功能只有两个：第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的抽象语法树结构（Abstract Syntax Tree，AST），第二个就是调用插件来处理 AST 并得到结果。也就是说，他可以在处理css这类文件之前，对其进行进一步处理，如添加前缀，则需要相应插件（Autoprefixer）可在npm官网查看。

四、下载loader 和plugin

考虑到loader和plugin的下载，我用的node自带的npm下载，我们可以去npm的官网上查看(直接搜索需要的loader即可)，也可以去webpack官网上查看如何下载

npm官网
webpack官网
我们需要的loader

babel-loader
css-loader
style-loader
sass-loader
node-sass
file-loader
html-loader
postcss-loader

具体用法自己去官网上看

我们需要的plugins

htmlWebpackPlugin
Autoprefixer

爬到树上看月亮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Webpack小结

前言        初学webpack，了解一下什么是webpack，然后进行基础学习如何使用webpack。什么是webpack        就目前而言我所知道的webpack是一个对项目模块儿或者资源进行打包压缩，因此项目体积变小，能提高运行效率的一个静态模块打包工具。     &nbs
复制链接

扫一扫