前端构建工具 -- Webpack

前言

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

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

一、简介

Webpack : 是前端打包工具，它从主文件（如index.html）开始，检查其依赖的模块文件，并将其中JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等）进行转换和打包成为一个（或多个）js文件
Grunt/Guip : 优化前端开发流程的工具，在一个配置文件中设置指定文件的编译，组合，压缩等任务的具体步骤，工具自动完成该任务

二、安装Webpack

使用npm安装webpack模块，在webpack 3中，webpack自己和它的CLI之前都是在同一个包中，但在第4版中，他们已经将二者分开来更好地管理它们,因此在webpack 4中须要先全局安装webpack和webpack-cli。
使用npm安装webpack模块:

npm install -g webpack
npmt install -g webpack-cli

三、使用webpack打包项目入门

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

webpack --mode development

二、使用webpack打包复杂项目
首先新建一个文件夹webpack-demo,其下有文件夹css和js,css文件夹里有
建立package.json : npm install
安装依赖包：

npm install webpack --save-dev
npm install jquery --save-dev
npm 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)