Webpack是用来干什么的

①转译代码（es6转为es5,scss转为css）

②构建build

③代码压缩

④代码分析

用到的工具webpack@5

安装方法见官网，在webpack后面加个@5即可

如果webpack 升级了，那么上面的思路依然有效

webpack-dev-server //用于本地预览

① 用webpack 转译JS

mkdir webpack-demo

cd webpack-demo

npm init -y //运行命令得到一个package.json文件

npm install webpack webpack-cli --save-dev //安装webpack-cli 生成两个文件: ①是node_modules; ②是package-lock.json文件.

如何调用本地安装的webpack

① npx webpack //npx在windows不够稳定如果安装node_modules里面有空格的话可能会不起作用

② ./node_modules/.bin/webpack --version //npx不能用的时候可以退回这种手动找路径的方式

执行npx webpack 安装时运行警告解决方法（警告如下图）

第一步：点击官网链接看文档

第二步：根据文档增加webpack.config.js文件

第三步：增加需要的文件看报错信息没有设置mode的option 为‘development’或者‘production’ 那么根据代码保留我们需要的mode这一列就可以啦

第四步：再次运行 npx webpack ————运行成功无警告

PS：development 和production的区别： development是开发模式 production是生产模式

报错图说没有设置mode和它的属性

成功运行步骤及图

webpack 配置entry 和output

学习时记录

自己的理解

那么这样的话我们每次生成的文件都是新的文件如果修改次数过多会造成dist里面有很多无效垃圾文件所以我们想到了解决方法先删除之前的文件再npx webpack 代码是

rm rf dist; npx webpack //先删除之前的dist文件夹再运行打包命令

注意点上面rm rf dist ; npx webpack改成 rm -rf dist ; npx webpack

每次运行这么长一串代码太累了吧有没有省略的方法

方法是在package.json文件里面的scripts 方法里面增加上

"build":"rm -rf dist && webpack"

然后运行 yarn build 或者 npm run build

yran build 或者 npm run build

webpack.config.js代码

var path = require('path');

module.exports = {

    mode: 'development',

    entry: './src/index.js',

    output: {

        path: path.resolve(__dirname, 'dist'),

        filename: '[name].[contenthash].js',

    }

};

② webpack转译html

在webpack 搜索 htmlwebpackplugin

根据文档运行安装命令

npm install --save-dev html-webpack-plugin

基本用法

const HtmlWebpackPlugin = require('html-webpack-plugin');

const path = require('path');

module.exports = {

entry: 'index.js',

output: { path: path.resolve(__dirname, './dist'), filename: 'index_bundle.js', },

plugins: [new HtmlWebpackPlugin()],

};

ps:以上检查是否有存在命令不需要的直接删除把需要的增加在webpack.config.js文件内容中

其它不懂的查看github文档

图解

③ webpack转译css

查看文档链接

npm install --save-dev mini-css-extract-plugin

跟着步骤操作就行

ps:i注意运行时会有个报错如下图

只需要运行命令yarn add css-loader --dev(注意css-loader跟报错信息resolve ‘ css-loader’要一致)

教程上就是style-loader 运行的命令也是 yarn add style-loader --dev

webpack-dev-server 自动刷新预览

查看是否引入成功css 命令

第一种方法：

        cd dist

        http-server . -c-1 //这种命令很麻烦一旦我们改了代码就要退出dist目录然后重新

yarn build

第二种方法：重点：webpack-dev-server

        第一步：查看上链接 ①运行命令 ② webpack.config.js增加内容 ③ package.json增加内容

第二步运行 yran start （这个方法修改代码后自动刷新并且不需要依赖dist文件===就算dist文件目录被删了也同样可以本地预览效果）