简单说明一下,此文章作为我学习复习使用,如有错误,欢迎指正,谢谢!
webpack的学习之路
webpack和插件的安装配置
首先我们需要生成一个包管理文件
npm init -y
webpack我即选择了全局安装,在项目里我也安装了
npm i webpack -g //全局安装命令
npm i webpack -s -D //项目本地安装命令
手动创建webpack.config.js文件用来设置生成bundle.js文件的配置
const path = require('path');
//通过Node模块操作,向外面暴露一个配置对象
module.exports={
entry:path.join(__dirname,'./src/main.js'),//打包文件
output:{
path:path.join(__dirname,'./dist'),//打包好的文件存放地址
filename:'bundle.js'//打包好的文件名
},
mode:'development',设置mode
}
安装webpack-dev-server用来自动生成bundle.js文件,避免我们每次更新代码都要重新打包bundle.js
cnpm i webpack-dev-server -D
如果你的cnpm命令无法使用,全局安装一下就好了
npm i cnpm -g
webpack-dev-server安装完成以后,因为webpack-dev-server不是全局安装,powershell无法运行命令
所以要配置信息运行
在package.json文件中找到scripts属性,其中添加以下值
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
配置完成运行
npm run dev
即可看到效果
在这里我贴一下我的index.html代码和main.js代码
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./bundle.js"></script>
</head>
<body>
<ul>
<li>测试列表</li>
<li>测试列表</li>
<li>测试列表</li>
<li>测试列表</li>
<li>测试列表</li>
<li>测试列表</li>
<li>测试列表</li>
<li>测试列表</li>
<li>测试列表</li>
<li>测试列表</li>
</ul>
</body>
</html>
main.js
//index.html的入口文件
import $ from 'jquery';
$(function () {
$('li:odd').css('backgroundColor','lightblue');
$('li:even').css('backgroundColor',function () {
return '#'+'D97634'
});
})
接下来我们继续配置html-webpack-plugin插件
首先是安装
cnpm i html-webpack-plugin -D
然后在webpack.config.js文件中配置以下信息
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
//通过Node模块操作,向外面暴露一个配置对象
module.exports = {
entry: path.join(__dirname, './src/main.js'),//打包文件
output: {
path: path.join(__dirname, './dist'),//打包好的文件存放地址
filename: 'bundle.js'//打包好文件的文件名
},
mode: 'development',//设置mode
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
})
]
}
这个插件的作用:
1.自动在内存中根据指定页面生成一个内存的页面
2.自动把打包好的bundle.js追加到内存中的页面里
到目前为止需要用到的插件都安装配置完成
接下来我们来安装配置loader
.css
li{
list-style: none;
}
.less
ul {
padding: 0;
margin: 0;
}
.scss
html, body{
margin: 0;
padding: 0;
background: url("../img/01.png");
background-size: cover;
}
li{
font-size: 12px;
line-height: 30px;
}
安装style-loader、css-loader
less-loader、less
sass-loader、node-sass
file-loader、url-loader
cnpm i style-loader css-loader -D
cnpm i less -D
cnpm i less-loader -D
cnpm i node-sass -D
cnpm i sass-loader -D
cnpm i file-loader -D
cnpm i url-loader -D
安装完成后再配置webpack.config.js文件
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
//通过Node模块操作,向外面暴露一个配置对象
module.exports = {
entry: path.join(__dirname, './src/main.js'),//打包文件
output: {
path: path.join(__dirname, './dist'),//打包好的文件存放地址
filename: 'bundle.js'//打包好文件的文件名
},
mode: 'development',//设置mode
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
})
],
module: {
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']},
{test: /\.less$/, use: ['style-loader', 'css-loader','less-loader']},
{test: /\.scss$/, use: ['style-loader', 'css-loader','sass-loader']},
{test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=3000&name=[hash:8]-[name].[ext]'},//处理图片路径的loader
//limit给定的值是图片的大小,单位是byte,如果我们引用的图片大于或等于给定的limit值则不会被转为base64格式
//的字符串,如果图片给定的值小于给定的limit值,则会被转为base64格式的字符串
{test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'},//处理字体文件的loader
]
}
}
最后的呈现效果
main.js文件
//index.html的入口文件
import $ from 'jquery';
import './css/index.css'
import './css/index.less'
import './css/index.scss'
$(function () {
$('li:odd').css('backgroundColor', 'lightblue');
$('li:even').css('backgroundColor', function () {
return '#' + 'D97634'
});
})
接下来我们来安装Babel及其配置
首先我们运行下面两套命令安装两套包:
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-pteset-stage-0 -D
然后,我们打开webpack.config.js文件,在module节点下的rules数组中添加新的匹配规则:
{test: /.js$/, use: 'babel-loader', exclude: /node_modules/}
注意:在配置babel的loader规则的时候,必须把node_modules目录通过exclude排除掉,原因有两个:
1.如果不排除,Babel会把node_modules中的所有JS文件一起打包,会非常消耗CPU,同时打包速度也会很慢
2.如果babel把node_modules中的JS全部转换,项目也就无法运行了
最后我们在项目的根目录创建一个叫做 .babelrc 的Babel配置文件,这个文件属于JSON格式
.babelrc
{
"presets": ["env","stage-0"],
"plugins": ["transform-runtime"]
}
到这里Babel就配置完成了,在运行过程中可能会出现报错信息,我们需要注意的是babel-core的版本和babel-loader的版本可能会出现排斥现象,如果报错,更换一下babel-loader的版本就可以了