前言

scss（sass）、less是css的预处理语言，采用其可以得到更规范，更清晰的css代码，typescript是javascript基础上扩展的代码，使我们能使用javascript不能使用的特性，并且可以转换为js代码

但这些语言编写的代码都需进行处理才能变成浏览器能识别的代码，手动处理又太过繁琐，所以使用webpack等自动打包工具就比较方便

1、简介

Webpack : 是前端打包工具，它从主文件（如index.html）开始，检查其依赖的模块文件，并将其中JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等）进行转换和打包成为一个（或多个）js文件

Grunt/Guip : 优化前端开发流程的工具，在一个配置文件中设置指定文件的编译，组合，压缩等任务的具体步骤，工具自动完成该任务

2、安装Webpack

使用npm安装webpack模块，在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们,所以在webpack 4中需要先全局安装webpack和webpack-cli。

使用npm安装webpack模块:

npm install -g webpacknpmt install -g webpack-cli

3、使用webpack打包项目入门

1、使用终端用webpack打包简单文件

webpack 4不能使用webpack 入口文件 出个文件 进行打包了，它的打包方式为默认入口文件是src目录下的Index.js文件，目的文件是dist目录下的main.js文件，打包命令行是,执行该命令行之后就能在dist目录下出现打包完成的文件main.js

webpack --mode development

2、使用webpack打包复杂项目

首先新建一个文件夹webpack-demo,其下有文件夹css和js,css文件夹里有创建package.json : npm install安装依赖包：

npm install webpack --save-devnpm install jquery --save-devnpm install style-loader css-loader --save-dev npm install extract-text-webpack-plugin –-save-dev

新建一个webpack.config.js文件进行打包配置：

var ExtractTextPlugin = require("extract-text-webpack-plugin");module.exports = {    entry:'./js/main.js',    output: {        path: '/dist',        filename: 'bundle.js'    },    plugins: [        new ExtractTextPlugin ('./style.css')    ],    module: {        rules: [            {                test: /\.css$/,                loader:ExtractTextPlugin.extract("style-loader","css-loader")            }        ]    }};

注：在webpack v2 之后loaders都用rules替代了

使用webpack进行打包webpack注：如果运行提示 command not found可以这么操作node_modules/.bin/webpack自定义shell命令来操作的。$ alias lwebpack="node_modules/.bin/webpack"

我们需要在js文件里，通过require的方式来引入css，我们来看具体的方法，首先需要安装css-loader，

style-loader(安装style-loader的目的是为了在html中以style的方式嵌入css)