Webpack简易使用

1.webpack介绍

Webpack 是一个前端资源加载/打包工具，可以根据配置将项目模块打包成静态资源。
webpack官网文档

2.webpack安装

    1).安装webpack前一定要安装node.js

        (1).安装node.js

nodejs下载地址

然后next到底

        (2).测试是否安装正确

在cmd中输入node -v

    2).全局安装webpack

npm install webpack -g

也可以只在项目中安装
npm install webpack --save-dev

    3).全局安装webpack-cli

npm install webpack-cli -g

也可以只在项目中安装
npm install webpack-cli --save-dev

3.使用webpack

    1).使用webpack的配置文件打包

        (1).新建一个目录webpackTest,在此目录下新建个src文件夹和webpack.config.js和index.js

        (2).在index.js写入简单的语法

        (3).在webpack.config.js写入配置

在webpack.config.js用的是CommonJs语法

/**
 * 必须使用CommonJs规范
 * 更多高级用法：https://www.webpackjs.com/concepts/output/
 */
 const path = require("path");//当前文件的目录

module.exports = {
    mode: 'development',
    entry: {
       index : "./src/index.js"//打包来源的位置
    },
    output: {
        path: path.resolve(__dirname, "dist"), // 打包文件的输出目录
           filename: "[name].js" //根据entry的名称在dist中生成相应的名称的js文件
    }

}

        (4).在根目录下执行webpack命令

    2).webpack的模块使用（Loader）

因为webpack只能处理js/json资源，但是在开发中还需要需要加载css、img，将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等功能，所以就需要使用到Loader。使用相关的功能只要下载相关的Loader就行。

css-loader: 使用