webpack使用

最新推荐文章于 2024-03-26 17:57:41 发布

_WEN_

最新推荐文章于 2024-03-26 17:57:41 发布

阅读量163

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/sinat_16979249/article/details/90737979

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

webpack使用

写此文时我所使用的webpack版本：“webpack”: "^4.32.2"

下载并安装node.js运行环境
【注】因npm的服务器在美国，访问有网络延迟，下载速度慢且可能出现中断，因此可以使用淘宝镜像用cnpm代替npm在安装多需要的各种包，方法： npm install -g cnpm --registry=https://registry.npm.taobao.org ，上面操作完成之后就可完全用cnpm代替npm了。本文以介绍为主，暂时使用npm。
全局安装webpacknpm install -g webpack
新建文件夹project，在project中打开cmd，输入npm init，（若暂时不想填信息则一路回车）得到package.json（不可缺少）文件用于记录当前项目依赖的模块以及自定义的脚本任务等信息。等以后想要在其他没有依赖包的地方操作代码时，只要执行npm install就会自动下载所需要的依赖包。
环境已经建立。在当前project文件夹下安装webpack npm install webpack --save-dev，完成后会在project中生成node_modules的文件夹，以后安装的依赖包都会被自动放在里里面。
【注】–save-dev是一体的，用来指示将webpack包的名称和版本信息记录在package.json文件中的开发依赖"devDependencies"下；而–save回放在“dependencies”下。
手动新建一个index.js文件（npm init时默认入口文件名称为index.js)
【注】新建文件夹可在cmd中输入mkdir 文件夹名称；新建文件输入touch 文件名称。（见常用cmd命令）
手动新建webpack.config.js文件，用于打包过程的个性化配置，类似于发快递时告诉快递员这里要包一下，要用胶带缠几圈，这个要分成几部分包，要给打好的包怎么命名，放在哪等等。

（未完待续……）

多入口多出口

手动配置

const HtmlWebpackPlugin = require("html-webpck-plugin")
moudle.exports = {
	...
	entry: {
	        //在index.html的引用位置与一下入口罗列顺序有关
	        entry1: __dirname + "/app/main.js",
	        entry3: __dirname + "/app/main3.js",
	        entry2: __dirname + "/app/main2.js",
	    },
	output: {
	    path: __dirname + "/dist",
	    filename: "[name].bundle-[hash].js"
	}
	...
	plugins: {
		new HtmlWebpackPlugin({
			title: "hello, i am here",
			template: __diraname + "/app/index.tmpl.html",
			filename: "index.html",
			//配置chunks属性，将会在<body>标签最后添加相应的<script>标签，
			//<script>的src对应output中文件的filename
			chunks: ["entry1", "entry2", "entry3"]
	)}
}

自动配置
（待续……）

webpack常用loaders及plugins

loaders ==> module
CSS相关：css-loader style-loader
Babel相关： babel-loader (@babel/cli @babel/core @babel/preset-env autoprefixer)
图片相关： url-loader file-loader

plugins ===> plugins
对js文件进行打包：uglifyjs-webpack-plugin (在optimization中使用）
在文件头作说明：webpack.BannerPlugin(属于webpack中的，直接引入webpack后点操作使用)
对html文件进行配置：html-webpack-plugin
去除之前生成的文件：clean-webpack-plugin
抽离css文件：mini-css-extract-webpack-plugin
对css文件进行压缩打包：terser-webpack-plugin(在optimization中使用）
optimize-css-assets-webpack-plugin(在optimization中使用）

_WEN_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack使用

webpack使用写此文时我所使用的webpack版本：“webpack”: "^4.32.2"下载并安装node.js运行环境【注】因npm的服务器在美国，访问有网络延迟，下载速度慢且可能出现中断，因此可以使用淘宝镜像用cnpm代替npm在安装多需要的各种包，方法： npm install -g cnpm --registry=https://registry.npm.taobao....
复制链接

扫一扫