webpack
中间可能会出现cnpm , npm ,yarn等三种安装方式,其实最终安装的结果都是一样的,只是安装的方式不一样
1.安装webpack
npm i webpack -g全局安装webpack
//在项目根目录中运行npm i webpack --save-dev安装到项目依赖中
1.webpack配置文件
在项目根目录中创建
webpack.config.js由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在
webpack.config.js中配置这两个路径：
// 导入处理路径的模块
var path = require('path');
// 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
module.exports = {
entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
output: { // 配置输出选项
path: path.resolve(__dirname, 'dist'), // 配置输出的路径
filename: 'bundle.js' // 配置输出的文件名
}
}
2.项目入口/项目出口
1.配置完之后,直接用webpack进行打包,就会输出对应的文件夹
3.下载html-webpack--plugin插件
yarn add html-webpack-plugin --dev
//html-webpack-plugin。它会自动帮你生成一个 html 文件，并且引用相关的 assets 文件(如 css, js)。
var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [new HtmlWebpackPlugin({
template: './src/index.html' //输出的路径
})]
4.打包js脚本
官方入口:https://webpack.js.org/loaders/babel-loader/#root
1.安装
npm install -D babel-loader @babel/core @babel/preset-env webpack
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {presets: ['@babel/preset-env']
}
}
}
]
}
8.启动热更新,配置端口号
-
修改
package.json的script节点--open`表示自动打开浏览器
--port 4321
表示打开的端口号为4321，--hot`表示启用浏览器热更新,不开启就自动刷新：
"dev": "webpack-dev-server --hot --port 4321 --open"
5.打包css文件
1.安装
cnpm i style-loader css-loader --save-dev
2.配置(webpack.config.js)
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则 ]
}
- use
表示使用哪些模块来处理test所匹配到的文件；use`中相关loader模块的调用顺序是从后向前调用的；
使用webpack打包less文件
1.安装
cnpm i less-loader less -D</pre>
- 修改
webpack.config.js这个配置文件：
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
使用webpack打包sass文件
- 安装
cnpm i sass-loader node-sass --save-dev
- 在
webpack.config.js中添加处理sass文件的loader模块：
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
使用webpack处理css中的路径
1.安装
npm install --save-dev style-loader css-loader
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
使用babel处理高级ES6语法
1.安装
cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包
//7.1.5版
npm install babel-loader@7.1.5
运行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安装babel转换的语法</pre>
- 在
webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }</pre>
- 在项目根目录中添加
.babelrc文件，并修改这个配置文件如下：
{
"presets":["es2015", "stage-0"],
"plugins":["transform-runtime"]
}</pre>
-
注意：语法插件
babel-preset-es2015可以更新为babel-preset-env，它包含了所有的ES相关的语法；*
处理图片
npm install --save-dev file-loader</pre>
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
{ test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ]
}
]
}
};
处理比较小的图片
npm install url-loader --save-dev</pre>
module.exports = {
module: {
rules: [
{test: /\.(png|jpg|gif)$/i,use: [{ loader: 'url-loader',options: { limit: 8192,} },
],
},
],
},
};
<mark style="box-sizing: border-box; background: rgb(211, 212, 14); color: rgb(0, 0, 0);">一次性处理</mark>
<pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="js" cid="n122" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: rgb(51, 51, 51); font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 10px 10px 0px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> // //图片
// {test: /.(png|svg|jpg|gif)/, use: ['file-loader']},
{
test: /.(png|jpg|gif|woff|woff2|eot|ttf|otf|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},</pre>
处理字体图标
yarn add font-awesome</pre>
import 'font-awesome/css/fontawesome.min.css';
项目打包
npm run build
