前言scss(sass)和less是css预处理语言，使用它可以得到更规范更清晰的css代码，typescript是基于javascript的扩展代码，让我们可以使用javascript的特性那个不能用，可以转成js代码，但是这些语言写的代码需要经过处理才能变成浏览器可以识别的代码。手工处理太麻烦，还是用webpack等自动打包工具更方便1.介绍Webpack：是一款前端打包工具。它从主文件（如index.html）开始，检查其依赖的模块文件，将JavaScript模块和其他不能被浏览器直接运行的扩展语言（Scss、TypeScript等）转换并打包合并成一个（或多个）js文件Grunt/Guip：一种优化前端开发流程的工具，将指定文件的编译、组合、压缩等任务的具体步骤设置在一个配置文件中，该工具将自动完成任务2，安装Webpack使用npm安装webpack模块，在webpack3中，webpack本身和它的CLI曾经是在同一个包中的，但是在版本4中，他们把两者分开了，以便更好的管理，所以在webpack4、webpack和webpack-cli需要先全局安装。使用npm安装webpack模块：npminstall-gwebpacknpmtinstall-gwebpack-cli三、开始使用webpack打包项目1、使用终端用webpack打包简单文件方式是默认入口文件是src目录下的index.js文件，目标文件是dist目录下的main.js文件，打包命令行为，执行命令行后，dist目录下会出现打包后的文件main。jswebpack--modedevelopment2.使用webpack打包复杂项目首先新建文件夹webpack-demo，文件夹下有css和js文件夹，在css文件夹下创建package.json：npminstall安装依赖包：npminstallwebpack--save-devnpminstalljquery--save-devnpminstallstyle-loadercss-loader--save-devnpminstallextract-text-webpack-plugin--save-dev创建一个新的webpack.config.js文件用于打包配置:varExtractTextPlugin=require("extract-text-webpack-plugin");module.exports={入口：'./js/main.js'，输出：{路径：'/dist'，文件名：'bundle.js'},插件:[newExtractTextPlugin('./style.css')],模块:{规则:[{test:/\.css$/,loader:ExtractTextPlugin.extract("style-loader","css-装载机")}]}};注意：在webpackv2之后，loaders使用rules代替webpack来打包webpack注意：如果运行提示commandnotfound，可以运行node_modules/.bin/webpack自定义shell命令来运行$aliaslwebpack="node_modules/.bin/webpack”我们需要通过require在js文件中导入css。我们来看看具体的方法。首先，我们需要安装css-loader、style-loader（安装style-loader的目的是为了在html中嵌入css的样式）
