webpack基础

一、关于模块化

在学webpack之前，我们需要先谈一谈模块化。前端的工程化少不了的一个部分就是模块化。在ES6之前，我们想要进行门模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。比如CommonJS,CMD,AMD。并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。

而webpack其中一个核心就是然我们可能进行模块化开发，并且会帮助我们 处理模块间的依赖关系。当然在webpack打包的过程中还有一些附带的功能，比如代码的压缩和图片的压缩，编译等。

如何理解打包呢？
打包就是将webpack中的个各种资源模块进行打包合并成一个或多个包。并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将sass转成css，将ES6语法转成ES5语法，将TypeScript转成javaScript等等操作。

二、webpack

1.安装webpack

• 在安装webpack之前我们必须先安装node环境，然后通过使用node的包管理工具npm来安装一些需要使用的包。
• 全局安装webpack一阶脚手架webpack-cli

       npm install webpack webpack-cli -g

• 在目录下生成src目录，拥有一个main.js文件，以及html,css,js文件的目录

2.终端命令打包

表示使用webpack将打包后的文件放在dist目录下,文件名是built.js

   webpack ./src/main.js -o dist/built.js --mode=development

2.1引入打包文件

在创建好的html中引入打包好的js文件

  <script src="/dist/bulit.js"></script>

3.配置文件打包

webpack.config.js 是webpack的配置文件，它的作用就是指定webpack打包时的入口文件，出口文件，打包方式等等一些问题。
配置文件中的所有构建工具都是采用common.js模块的。

3.1初始化包配置文件

当我们要使用node中的包之前，最好是先初始化一个关于包的配置文件，记录包的信息，方便之后的管理和查找。

    npm init -y

3.2配置文件中的内容

关于里面的内容我会在后面的文章中介绍：

//引入模块
const{
      resolve }=require('path');
module.exports={
     
  	//入口文件
    entry:'./src/index.js',
    //输出
    output:{
     
        //输出文件名
        filename:'built.js',
        //输出路径
        //_dirname nodejs的变量，代表当前文件
        path: resolve(__dirname,'build')
    },
    //loader的配置
    module:{
     
        rules:[
            //详细的loader配置
            {
        //表示.css结尾的文件
                test:/\.css$/,
                //使用那些loader进行处理
                use:[
                    //user中的loader执行顺序，从右到左
                    //创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载到js中，里面内容是样式字符串
                    'css-loader',
                ]
            },
            {
     
                test:/\.less$/,
                user:[
                    'style-loader',
                    'css-loader',
                    //将less文件编译成css文件
                    'less-loader'
                ]
            }
        ]
    },
    //plugin的配置
    //详细的plugins的配置
    plugins:[
        
    ],
    //模式
    mode:'development',
}

4.webpack打包命令

在之前我们启动的项目的时候会使用例如：npm run srever 或者是 npm run build的方式来运行项目，那么这些是什么呢？
打开我们上面创建好的package.json文件，你会发现有个scripts脚本对象，里面包含的就是项目运行所需要的指令。这样我们就不必写规定的命令来运行一个指令。

 "scripts": {
     
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },

上面我们只需要使用 输入npm run bulid就可以进行打包 。
当然使用这样的方法比直接使用webapck命令打包会更好，因为使用npm run build命令时，会优先去本地查找webpack，而直接使用webapck使用的是全局安装的webpack。
而我们在开发的时候最好是使用本地webpack,这时候我们就需要安装一个本地的webpack。

	npm install webpack -D

因为webpack只在开发时有用，所以这里的-D表示开发依赖。