webpack使用
写此文时我所使用的webpack版本:“webpack”: "^4.32.2"
- 下载并安装node.js运行环境
【注】因npm
的服务器在美国,访问有网络延迟,下载速度慢且可能出现中断,因此可以使用淘宝镜像 用cnpm
代替npm
在安装多需要的各种包,方法:npm install -g cnpm --registry=https://registry.npm.taobao.org
,上面操作完成之后就可完全用cnpm
代替npm
了。本文以介绍为主,暂时使用npm
。 - 全局安装webpack
npm 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中使用)