sass 和 less 都是css的拓展语言，less和sass最主要的区别是less是通过Javascript编译，而sass是通过ruby编译的，如果没有引入前端工程化，less会消耗客户端性能，sass会消耗服务端性能，但是引入前端工程化的话，gunt，gulp，webpack等，less和sass在打包阶段都会转化成css，所以不会有区别，只是sass是基于ruby，所以每次npm的时候相对慢一点点

https://www.webpackjs.com/concepts/

webpack配置

0、搭建项目结构

项目结构

--src：代码开发目录，

--build：开发环境webpack编译打包输出目录，同样按照view、styles、js组织

--dist：生产环境webpack编译打包输出目录，同样按照view、styles、js组织

--node_modules：所有使用的nodeJs模块

--package.json: 项目配置

--webpack.config.js: 开发环境webpack配置

--webpack.production.config.js: 生产环境webpack配置

20200716-基本的打包方式

步骤1、初始化项目

npm init

执行npm init，输入一个名字，其他全部默认回车，就会在当前目录下生成一个package.json文件

npm init

步骤2、全局安装webpack 和 webpack-cli

npm i webpack webpack-cli -g

npm i webpack webpack-cli -g

步骤3、本地安装webpack 和 webpack-cli，-D会把webpack添加到 package.json中的开发依赖，webpack下载的所有东西都属于开发依赖

npm i webpack webpack-cli -D

npm i webpack webpack-cli -D

步骤4、执行打包命令

webpack ./src/index.js -o ./build/built.js --mode=development

执行打包命令报错,Restricted 策略不允许任何脚本运行。如果没有报错，跳过下面的两句命令。

执行打包命令报错

查看报错原因，将计算机上的执行策略更改为 RemoteSigned，允许脚本运行。

将计算机上的执行策略更改为 RemoteSigned

set-executionpolicy remotesigned

set-executionpolicy remotesigned

解决上述问题再重新打包，就成功了。

webpack ./src/index.js -o ./build/built.js --mode=development

开发环境打包出来的 built.js文件

步骤5、生产环境打包

webpack ./src/index.js -o ./build/built.js --mode=production

webpack ./src/index.js -o ./build/built.js --mode=production

打包出来的文件都压缩了

生产环境打包出来的 built.js文件

安装loader

安装css文件需要的loader

npm i css-loader style-loader -D

安装完成后，就会在package.json里出现。

npm i css-loader style-loader -D

然后就可以在webpack.config.js中使用。

在webpack.config.js中使用

安装less文件需要的loader

npm i less-loader -D

.less文件比.css多一个less-loader。

在webpack.config.js配置less-loader

在样式中引入图片资源，需要安装url-loader、file-loader

安装url-loader前通过webpack打包图片资源，会报错

安装url-loader前通过webpack打包图片资源，报错

因为url-loader依赖file-loader，所以下载两个包

npm i url-loader file-loader -D

上面安装好url-loader、file-loader后，在webpack.config.js进行配置，然后跑webpack命令，就会看到./build文件夹里面生成了两个图片，还有一涨18kb以下的图片，被base64处理。

webpack.config.js配置

18kb以上，被处理后名字为哈希值的图片

18kb以下的图片被base64处理

18kb以下的图片被base64处理

在样式中引入图片资源，要安装并配置url-loader，进行打包

在html中通过<img/>引入图片资源，需要安装html-loader

npm i html-loader -D

npm i html-loader -D

html中使用<img/>标签引入图片资源

html中使用<img/>标签引入图片资源

webpack.config.js配置

webpack.config.js配置html-loader，和关闭url-loader的es6模块化，使用commonjs解析

webpack打包后，./build/index.html中成功引入图片资源

./build/index.html中成功引入图片资源

修改打包后的图片名称

修改打包后的图片名称

安装plugins

安装html文件需要的plugin

npm i html-webpack-plugin -D

安装html-webpack-plugin

html-webpack-plugin安装成功后会出现在package.json里

html-webpack-plugin安装成功

使用html-webpack-plugin

在webpack.config.js中配置使用

webpack打包，build文件夹中多了一个index.html文件。

webpack打包

在./build/index.html文件中，引入了built.js，但是./src/index.html文件并没有引入。

./build/index.html

./src/index.html

./src/index.js

需要有结构的HTML文件

webpack.config.js配置写法改一下

重新webpack打包，html里面的结构就出来了

./build/index.html文件

devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）

使用前先安装

npm i webpack-dev-server -D

npm i webpack-dev-server -D

在webpack.config.js中配置devServer

webpack.config.js中配置

因为是在本地安装的webpack-dev-server，所以跑命令npx webpack-dev-server

npx webpack-dev-server

npx webpack-dev-server

一直监听是否有变动