webpack4.X 随手使用教程，从入门到进坑
起步安装
npm i webpack --save-dev复制代码
打包
下面咱们对main.js进行打包
main.js//
const a=function(){
alert('hello webpack');
}复制代码
命令行打包输入（使用webapck4.0以上的须要安装webpack-cli环境）：javascript
webpack main.js ./dist/index.jscss
上面命令行中 main.js 为入口文件（便可须要打包的js文件） ./dist/index.js 为打包后输出的文件路径html
CSS打包
在webpack打包css文件时候须要安装相应的loader，由于在webpack打包是默认没有解析css文件类型的，因此咱们须要安装style-loader,css-loader。（css-loader负责解析和打包.css文件的内容，style-laoder负责将css-loader解析打包的内容注入到html中进行应用）
使用npm 进行loader的安装 java
npm i style-loader css-loader --save-devnode
咱们修改main.js进行引入CSS文件的操做webpack
main.js//
require('./style.css');
const a=function(){ alert('hello webpack');
}
复制代码
style.css//
html,body{
padding:0;
margin:0;
}
body{
background:red;
}复制代码
进行命令行操做打包css3
webpack main.js ./dist/index.js --module-bind 'css=style-loader!css-loader'es6
上面命令行中的 --module-bind 是webpack命令行参数，表示模块绑定某功能，'css=style-loader!css-loader' 表示为当打包的是css文件时候使用插件 css-loader和style-loader进行打包web
wbepack的经常使用命令行参数
上面打包css中咱们提到了webpack的命令行参数
--module-bind ,webapck中还有许多的命令行参数，这些参数命令行有益帮助咱们对项目的优化和调试，下面我就列几个经常使用的命令行参数好了
--wacth 当文件发生改变时候自动进行打包npm
--progress 显示打包过（显示打包进度读条）
--display-modules 显示全部打包引用的模块，而且也会显示此模块是经过什么loader进行处理等详细数据
--display-reasons 显示所需打包的模块的缘由
--config 文件名 修改webpack打包配置文件的指向
webpack配置文件webpack.config.js配置打包
使用命令行打包不少类型文件和其余配置时候每次打包都很是麻烦，因此可使用webpack的配置文件来设置好配置进行一键打包，不用每次都输入很长很长的命令行。
咱们先在项目结构下建立一下文件目录，方便咱们后面进行项目整理和打包
/scr/script/main.js
/dist/
首先咱们在项目的根目录建立一个 webapck.config.js 的文件（打包配置文件）
webpack.config.js//
module.exports = {
//使用的模式
mode:"production",
//1.打包入口文件参数
entry:'./src/script/main.js',
//2.打包后输出的文件目录和文件名
output:{
//目录
path:__dirname+"/dist/",
//相对path的路径文件名
filename:"index.js"
},
//3.资源文件处理配置
module:{}
//4.插件参数
plugins:{}
}复制代码
上面参数中：
mode: 指定打包的的模式进行代码优化，参数分别有三个：development (开发环境模式)， production（生产环境模式） none (任何默认优化选项).
entry: 为打包入口文件的路径，输入值能够是字符串，数组字符串，json。什么状况下输入数组，json呢？请看下面解析
string: 单个打包文件路径
Array<string>: 将两个或多个平行不互依赖打包到一个块映射表中
json: 打包多个文件并根据对应的值输出多个对应的文件。使用json打包多个文件须要修改 output的值
output:{
path:__dirname+"/dist/",
//[name]对应被打包的文件名，[chunhash]对应每次打包的哈希值,对版本管理很是有用
filename:'[name].js' or '[hash].js' or '[chunhash].js'
}复制代码
output: 是打包后输出文件的路径，传的参数是json格式数据，path键对应的值必须是绝对路径目录，因此咱们用到了node中的语法 __dirname (当前文件的路径) 进行路径接拼,filename就是输出文件的相对于path的相对路径。
module: 对文件类型处理的模块参数
plugins: 调用的插件
好了，咱们在命令行中运行一下webpack 就能够发现咱们已经打包成功了
自动生成html文件插件。 html-webpack-Plugin
若是咱们用chunhash为打包文件命名时候，每次打包的名字都不一样手动去修改index的引入的文件名称很是大的麻烦。因此咱们能够用自动生成html的文件让webpack在打包的生成html时候引入打包的js。
html-webpack-plugin
首先安装插件
npm i html-webpack-plugin --save-dev
修改webapck.config.js 中的plugins的内容
// 引入html-webpack-plugin插件
const htmlWebpackPlugin=require('html-webpack-plugin');
module.exports = {
mode:'development',
//打包入口文件参数
entry:'./src/script/main.js',
//打包后输出的文件目录和文件名
output:{
//目录
path:__dirname+"/dist/",
//文件名
filename:"index.js"
},
// 资源文件处理配置
module:{
},
// 插件调用
plugins:[
// 实例化插件
new htmlWebpackPlugin(),
]
}复制代码
当咱们须要指定生成html的内容样式时候能够进行对 html-webpack-plugin 传参，参数为json格。
plugins:[
// 实例化插件
new htmlWebpackPlugin({template：'temp.html'}),
]复制代码
参数中的
html-webpack-plugin 的参数中能够指定多种属性，如下列几个经常使用知足开发场景使用的属性参数
template:string （可选）指定引用的模板文件
filename:string （可选）指定生成的html的文件名，默认index.html
inject:{Boolean\|String} （可选）把webpack打包的js文件放到指定标签中引入，默认放到body底部，当值为false时将不进行引入打包的文件
minifly:{Boolean\|Object} （可选）是否对生成html文件进行压缩，参数属性: collapseInlineTagWhitespace:true 压缩代码，removeComments:true 删除注释
tiltel:string （可选） 注入到生成的html中，用模板语法进行调用, <%= htmlWebpackPlugin.options.titel%>
chunks:Array<tring> 根据本次打包的chunk来指定实例生成html中引入的文件
excludeChunks:Array<string> 指定排除chunk本次打包文件不进行引入到html中
相似于后端嵌套html执行同样，<%=%>表示打印输出。
具体html-webpack-plugin的参数和用法能够参考官方文档 https://www.npmjs.com/package/html-webpack-plugin
多页面应用打包 html-webpack-plugin
对于多页面应用打包html咱们改怎么打包呢？其实很简单。下面咱们来应用一下
在plugins中new多一个实例html-webpack-plugin，而且传入文件名参数指定不一样的文件名。
plugins:[
new htmlWebpackPlugin({template:"./index.html",filename:"index.html"}),
new htmlWebpackPlugin({template:"./index.html",filename:"app2.html"}),
]
复制代码
运行命令 webpack 打包一下
自动打包生成了两个html文件。
可是，若是咱们要引入两个或个不一样的js，而且打包区分到不一样的html中该怎么办呢，这样咱们就须要在html-webpack-plugin中传入参数chunks便可
plugins:[
new htmlWebpackPlugin({template:"./index.html",filename:"index.html",chunks:['main.js','a.js']}),
new htmlWebpackPlugin({template:"./index.html",filename:"app2.html",chunks:['b.js']}),
]复制代码
运行webpack打包~
生成的index.html和app2.html因此引用的js已经区分引入各自的js啦。
publicPath 修改html引入文件的路径
webpack打包每次打包完是以绝对路径引入js文件的，若是咱们放置的项目位置不在站点根目录的话会出现引入文件出错404，因此咱们能够设置publicPath占位符对引入路径进行修改
在output中参数添加属性publicPath:
//打包后输出的文件目录和文件名
output:{
//目录
path:__dirname+"/dist/",
//文件名
filename:"index.js",
publicPath:"http://cdn.com/"
},复制代码
webpack打包一下，咱们会发现js引入的路径已经和以前的不同了
如何处理资源文件
这里咱们来学webpack最牛逼的东西，loader处理。能够对es6转es5，css前缀添加，图片压缩，建立组件等等功能。
首先，咱们要改一下文件的目录和webpack.config.js配置方便咱们后面的学习。
以app.js为入口文件引入viwe组件
//app.js
import viwe from "./components/viwe/index.js";
function hello(){
console.log(viwe)
}
new hello();复制代码
下面咱们对viwe组件文件的编写
component/viwe/index.js
//component/viwe/index.js
//引入html模板
import temp from './index.html';
function out(){
return {
name:'viwe',
tmplate:temp
}
}
//默认导出组件模块
export default out
复制代码
component/viwe/index.html
<div>
<h1>hello,webpack</h1>
</div>复制代码
component/viwe/index.less
div{
h1{
color: red;
}
}复制代码
文件编辑完了，咱们来对webpack.config.js进行修改配置
// 引入html-webpack-plugin插件
const htmlWebpackPlugin=require('html-webpack-plugin');
module.exports = {
mode:'development',
//打包入口文件参数
entry:"./src/app.js",
//打包后输出的文件目录和文件名
output:{
//目录
path:__dirname+"/dist/",
//文件名
filename:"[name].js",
},
// 文件处理参数
module:{
},
// 插件调用
plugins:[
// 实例化插件
new htmlWebpackPlugin({template:'index.html'})
]
}复制代码
好了，咱们先打包一下看看会怎么样
咱们会发现webpack报错了，模块出现错误，你应该使用对应的loader进行文件资源处理。
因此咱们要进行loader使用了，首先咱们基本了解一下loader的使用先
须要在webpack.config.js的module.rules中添加loader处理参数，以json的方式传入
参数中有test:的为正则匹配的文件类型，use:为调用的loader，能够传字符串或数组，传入数组的状况是须要使用多个loader对文件资源进行处理，而且进行的顺序为从右到左。若是须要对loader传参须要用到options:
// 文件处理参数
module:{
rules:[
{
test: /\.js$/,
//若是须要使用多个loader进行处理，须要传入数组的方式，而且运行loader顺序为从右到左
use: [
{
loader:'babel-loader',
//对loader传参
options:{
presets:['@babel/preset-env']
},
}
],
exclude:/node_modules/
}
]
},复制代码
参数详解：
test: 须要处理的文件类型，正则参数
use:string|Array 处理文件类型的loader，只调用一个loader而且不传参数时候使用字符串形式传入，须要传入参数到laoder使用json格式，须要调用多个loader进行文件处理时候须要json数组形式
exclude: 不进行资源处理的文件夹
babel的支持：ES6，ES7转换ES5或相对应兼容浏览器
es6和es7在现代大多数浏览器中仍是不兼容的，因此咱们要用babel来js进行转换es5，以便兼容各个浏览器。
npm安装babel npm install babel-loader @babel/core @babel/preset-env --save-dev
调用babel对js代码进行转换的方法有不少种，下面我举例两种简单调用方法好了。
对webpack.config.js配置文件中的module.rules添加babel调用而且传入插件调用参数
// 资源文件处理配置
module:{
rules:[
// 调用babel
{
test: /\.js$/,
use:
{
loader:'babel-loader',
// 传入参数
options:{
presets:['@babel/preset-env']
}
}
,
// 排除不须要进行处理的文件夹
exclude:/node_modules/
}
]
},复制代码
webpack运行一下打包，查看打包出来的js代码已经进行了转换
除了在module.rules属性配置外，咱们还在项目根目录中建立一个.babelrc（官方推荐）对babel进行配置。
建立.babelrc对babel进行功能配置
{
"presets": [
[
"@babel/preset-env",
]
]
}复制代码
咱们把webpack.config.js出的传参删除掉运行一下webpack，查看打包出来的代码也已经给转换了。
css文件处理与添加自动添加前缀
下面我介绍如何在webpack.config.js中配置打包css文件和进行自动前缀添加处理，咱们先建立一个css文件编写一个css3的样式如：display:flex;
在module.rules中添加多一个对象
// 处理css资源
{
test:/\.css$/,
use:[
// 3.写入到html中
{loader:'style-loader'},
// 2.对css文件进行处理
{loader:'css-loader'}
]
}复制代码
就这样就配置完啦，运行一下webpack打包能够看到improt的css也被打包进去了。
如何添加浏览器版本前缀
咱们须要先按照postcss-loader和post的插件autoprefixer。
npm安装 npm i postcss-loader autoprefixer --save-dev
安装完成后咱们对上面的css资源处理属性添加多一个postcss-loader。
{
test:/\.css$/,
use:[
// 3.写入到html中
{loader:'style-loader'},
// 2.对css文件进行处理
{loader:'css-loader'},
// 1.先进行Postcss处理css文件添加前缀
{loader:'postcss-loader'}
]
}复制代码
完成这一步，咱们须要建立一个postcss的配置文件进行配置postcss的模式和插件，在项目根目录建立一个 postcss.config.js
module.exports={
plugins:[
require('autoprefixer'),
]
}复制代码
上面配置的意思为添加使用插件 autoprefixer
好了，基本配置咱们都配完了，进行webpack打包。打开浏览器能够打包样式已经被添加前缀了。
如何指定须要添加的前缀的浏览器版本
在默认添加前缀中，autoprefixer为咱们添加的前缀为当前浏览器版本初版兼容前缀，那咱们对应一些特殊的须要，须要添加各类浏览器的前缀和他们的历史版本兼容前缀，改怎么办呢？其实很简单，只须要在package.json中配置一下便可
打开根目录的package.json进行添加
"browserslist": [
"last 5 version",
"> 1%",
"maintained node versions",
"not dead"
]复制代码
上面属性解释：
"last 5version" =>添加浏览器最后5个版本的兼容前缀
">1%" =>全球市场份额大于1%的浏览器
处理css文件中@import的特别状况
当咱们在css文件@import 其余css文件时候会发现autoprefixer没有为引入的css文件进行添加前缀，这时候咱们须要为css-loader传递一个参数
importLoaders:number，告知须要引入多少个loader来处理咱们@improt进来的css文件
// 处理css资源
{
test:/\.css$/,
use:[
// 3.写入到html中
{loader:'style-loader'},
// 2.对css文件进行处理
{loader:'css-loader',options:{improtLoaders:1}},
// 1.先进行Postcss处理css文件添加前缀
{loader:'postcss-loader'}
]
}复制代码
这样咱们打包就会自动为@import的css文件添加前缀了。
处理less或sass文件资源
处理less或sass文件很是简单，须要安装less 和less-loader 或sass 和sass-loader便可
首先咱们先npm进行安装一下
npm i less less-loader --save-dev
在webpack.config.js配置文件中的module.rules添加多一个参数
// 处理less资源 { test:/\.less$/, use:[ // 3.写入到html中 {loader:'style-loader'}, // 2.对css文件进行处理 {loader:'css-loader'}, // 1.先进行Postcss处理css文件添加前缀 {loader:'postcss-loader'}, {loader:'less-loader'} ] }复制代码
运行wbepack打包一下，打包成功~
处理template模板
在项目中咱们会对功能进行组件化，这时候template模板是必不可少的，处理template模板是依据咱们使用的loader进行配置的，一般template当成字符串或函数引用的。下面咱们对把template当成字符串引用的实例好了
npm安装html-loader npm i html-loader --save-dev
咱们建立一个temp.html
//temp.html
<div>
<h1>hello,templatte</h1>
</div>复制代码
在入口文件main.js引入temp.html
//main.js
import temp from './temp.html';
const hello=(function(){
function hello(x){
document.getElementsByTagName('body')[0].innerHTML=x;
}
return hello;
})()
new hello(temp);
复制代码
完成基本引入，咱们来对webpack.config.js的module.rules添加配置
// 处理template模板
{
test:/\.html/,
use:'html-loader'
}复制代码
webpack打包运行一下，咱们会发现打包出来的html已经被加载咱们的template模板了。
处理图片资源打包
若是咱们在html或css、js中引入图片、svg资源直接进行打包的话会出现报错的状况，由于咱们要安装相应的loader对资源文件进行处理，这里咱们就用到了file-loader，url-loader
npm安装 npm i url-loader file-loader --save-dev
在webpack.config.js中的module.rules添加配置属性
{
test:/.(jpg|png|gif|svg)$/,
use:[
{
loader:'url-loader'
//传参设置文件小于多少kb进行转化成流的bs64编码嵌入文件中
options:{
//10KB
limit:10000
}
}
]
}复制代码
在上面的配置中
url-loader是对引入的图片资源进行转换成bs64编码的流嵌入到咱们的css或html中，limit：number参数设置大于多少的图片进行转换。当文件资源大于设定的大小会交给file-loader进行处理，file-loader是对文件进行提取而且自动修改webpack打包出来的路径。
接下来咱们运行webpack打包就不会出错，图片也引来进来~
若是咱们有特殊的需求须要对图片资源进行打包时候压缩的话能够引用image-webpack-loader对资源进行压缩
npm 安装 npm i image-webpack-loader --save-dev
{
test:/.(jpg|png|gif|svg)$/,
use:[
{
loader:'url-loader'
//传参设置文件小于多少kb进行转化成流的bs64编码嵌入文件中
options:{
//10KB
limit:10000
}
}
//调用image-webpack
{loader:"image-webpack-loader"}
]
}复制代码
这样咱们的webpack就会自动为咱们的图片资源大小进行压缩打包了
---------------------------------------底线啦--------------------------------------------------
先写到这里吧，后续会更新
- 1. json教程从入门到使用
- 2. webpack4.x入门到进阶-陈潇冰-专题视频课程
- 3. [教程]MongoDB 从入门到进阶 （TextSearch）
- 4. webpack4+入门使用
- 5. webpack4.x 使用
- 6. Angular 从入坑到挖坑 - Router 路由使用入门指北
- 7. Hbase从入门到入坑
- 8. MyCat～从入门到入坑。
- 9. git从入门到入坑
- 10. webpack从入门到进阶
- 更多相关文章...
- • Memcached入门教程 - NoSQL教程
- • TortoiseSVN 使用教程 - SVN 教程
- • YAML 入门教程
- • Java Agent入门实战（一）-Instrumentation介绍与使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。