一、安装
【Webpack基本构建】在安装之前，本地环境需要支持node.js 。
简单初始化一个项目：
npm init -y
安装：
npm-g
cnpm-g //使用淘宝镜像安装
npm-cli -g // 全局安装 -cli
二、创建项目
例：
三、..js 配置文件
基础配置
/*webpack.config.jswebpack的配置文件当运行 webpack 指令时，会加载里面的配置所有的构建工具都是基于 node.js 平台运行的，模块化默认采用commonjs*/// resolve 用来拼接绝对路径的方法const {resolve} = require('path');module.exports = {// webpack 配置// 入口起点entry: './src/index.js',// 输出output: {// 输出文件名filename: 'built.js',// 输出路径// __dirnamenodejs的变量，代表当前文件的绝对路径path: resolve(__dirname, 'build')},// loader的配置module: {rules: [// 详细loader配置]},// plugins的配置plugins: [// 详细的plugins 配置],// 模式mode: 'development', //开发模式// mode: 'production', // 生产模式}
四、打包css和less文件（ 下载 使用（配置））
本身只能处理模块，如果要处理其他类型的文件，就需要用到进行转换 。
所以，如果需要在应用中添加css文件，就需要用到css-和style-，css-会遍历CSS文件，然后找到url()表达式处理他们，style-会把原来的CSS代码插入到页面中的一个style标签中 。
用处理CSS文件
// loader的配置module: {rules: [// 详细loader配置{test: /\.css$/, // 匹配.css结尾的文件// 使用Loader进行处理use: [// use数组中的执行顺序：从右到左，从下往上，依次执行'style-loader',// 创建style标签，将js中的样式资源插入，添加到head中生效'css-loader'// 将css文件变成commonjs模块加载到js中，里面内容是样式字符串]}]},
// ‘style-’ 创建style标签，将js中的样式资源插入，添加到head中生效
// ‘css-’ 将css文件变成模块加载到js中，里面内容是样式字符串
// use数组中的执行顺序：从右到左，从下往上，依次执行
安装css-和 style-
npm i css- style- -D
打包less文件
{test: /\.less$/,use: ['style-loader','css-loader','less-loader'// 将less文件编译成css文件 需要安装less-loader和less]}
安装less-和less
npm i less- -D
npm i less -D
五、打包html文件（插件 下载 引入 使用）
文章插图
2、将.css和.ttf .woff .woff2文件复制到项目中（可放入src/icon文件夹下） 。
3、Index.js中引入.css文件 。
import './icon/iconfont.css'index.html文件中添加span标签
Have a good time!class="iconfont">class="iconfont">class="iconfont">class="iconfont">4、添加配置文件
{// 打包其他资源（除了html/js/css/less之外的资源）exclude: /\.(css|js|html|less)/,loader: 'file-loader'}5、显示
最好每打包一部分就运行一次查看结果 。
运行：
直接在终端进入此文件夹输入命令：
【..js】
/*webpack.config.jswebpack的配置文件当运行 webpack 指令时，会加载里面的配置所有的构建工具都是基于 node.js 平台运行的，模块化默认采用commonjs*/const {resolve} = require('path');// resolve 用来拼接绝对路径的方法const HtmlWebpackPlugin = require('html-webpack-plugin');// 引入插件module.exports = {// webpack 配置// 入口起点entry: './src/index.js',// 输出output: {// 输出文件名filename: 'built.js',// 输出路径// __dirnamenodejs的变量，代表当前文件的绝对路径path: resolve(__dirname, 'build'),},// loader的配置// 不同文件需要配置不同Loader module: {rules: [// 详细loader配置{test: /\.css$/, // 匹配.css结尾的文件// 使用Loader进行处理use: [// use数组中的执行顺序：从右到左，从下往上，依次执行'style-loader',// 创建style标签，将js中的样式资源插入，添加到head中生效'css-loader'// 将css文件变成commonjs模块加载到js中，里面内容是样式字符串]},{test: /\.less$/,use: ['style-loader','css-loader','less-loader'// 将less文件编译成css文件 需要安装less-loader和less]},{// 处理图片资源test: /\.(jpg|png|gif)$/,loader: 'url-loader',// 需要url-loader和file-loaderoptions: {// 优点：减少请求数量（减轻服务器压力）// 缺点：图片体积会更大（文件请求速度1更慢）limit: 336 * 1024, // 图片小于336kb就会被base64处理 esModule: false} },{test: /\.html$/,loader: 'html-loader', // 并不是处理html文件，而是专门处理html文件中的img图片标签（负责引入图片，从而能被url-loader打包处理）options: {esModule: false}}]},// plugins的配置plugins: [// 详细的plugins 配置插件 html-webpack-pluginnew HtmlWebpackPlugin({template: './src/index.html' // 复制'./src/index.html'文件，自动引入打包输出的所有资源（js/css）}) // 功能：默认创建一个空的html文件，自动引入打包输出的所有资源（js/css）],// 模式mode: 'development', //开发模式// mode: 'production', // 生产模式}
- Barra模型因子的构建及应用系列七之Liquidity因子
- 上 构建Lua解释器Part7：构建完整的语法分析器
- R语言基本绘图参数
- 有效拜访的两个基本条件
- 用户权限-Linux系统基本权限
- webpack 从入门到放弃！
- 中考暂停使用计算机,初中生停止发育的4个信号，如果全中招，基本与大长腿无缘了
- 企业无故不缴纳基本养老保险费的应如何处理
- 详细 webpack
- 一 构建SpringCloud 项目初始环境