项目构建工具Webpack环境配置与优化

Webpack

前言：webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）；在webpack看来，所有的前端资源文件（js/css/less/img/…）都会作为模块处理；它将依据模块间的依赖关系进行静态分析，打包（bundle）生成对象的静态资源。

• 核心配置文件webpack.config.js

核心概念	核心知识点介绍
Entry入口	作用：指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图 类型：1）字符串string：单入口。打包形成一个chunk，输出一个bundle文件。默认chunk名称是main。 2）数组array：所有入口文件最终只会形成一个chunk，只输出一个bundle文件。–>只有在HMR功能中让hrml热更新生效时使用。 3）对象object ：多入口。有几个入口文件就形成几个chunk，输出几个bundle文件。此时chunk的名称为键key。
output输出{}	作用：指示Webpakc打包后的资源bundles输出到哪里去，以及如何命名。 内容： filename :输出文件名称（指定名称+目录）,可以直接使用’[name][hash].js’等默认标识。 path:输出文件目录（将来所有资源输出的公共目录），常利用path.join绝对路径标识语法。 publicpath:’/’。所有资源引入公共路径的前缀。 chunkFilename:’[name]_chunk.js’。非入口chunk的名称；如code split时import打包其他文件及node_module封装时。 library:’[name]’。整个库向外暴露的变量名。 libraryTarget。指示变量名添加到哪个browser上。**library常结合dll使用
module模块{}	作用：加载使用loader，让Webpakc能够去处理那些非JavaScript文件。 使用：多个loader用use:[]；单个loader用loader；exclude:排除对应路径下的文件；include:只检查对应路径下的文件；enforce:'pre’优先执行；enforce:'post’延后执行；oneOf:[]只会执行其中的一个，检索到哪个即执行，后面的不再执行
plugin插件[]	作用：执行除loader范围外更广的任务，如打包优化和压缩等。需要先引入再使用
mode模式	作用：声明工作模式。development|production
devserver(开发环境)	作用：开发环境下实时监控自动打包项目资源。只会在内存中编译打包，不会有任何输出。 使用：见下文代码块

• 开发环境预配置脚本

// 开发环境预配置脚本

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
   
    // Entry入口
    entry:'/src/index.js',
    // output输出
    output:{
   
        filename:'built.js',
        path:path.join(__dirname,'build'),  //所有输出资源的统一路径
        /*publicpath:'/' */  //这个是为了处理图片资源等输出到统一路径下后，在html中导入时无法跨域识别导致返错的问题，因为默认情况下webpack会将生成的路径直接返回给使用者；但是如果应用了打包HTML资源的话，就不存在该路径问题了
    },
    
    module:{
   
        // loader加载配置，处理项目资源文件，如果需要处理css/less等文件，需要在入口文件处设置依赖，这样当运行到对应资源时会加载对应的loader
        rules:[
            {
   
                // 处理css资源文件
                test:/\.css$/, 
                use:[
                    // use数组中loader的执行顺序：从右到左，从下到上
                    'style-loader',//创建style标签，将js中的样式资源插入添加到head中生效
                    'css-loader'//解析CSS文件后，使用import加载，并且返回CSS代码
                ]
            },
            {
   
                // 处理less资源文件
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader' //将less文件编译成css文件
                ]
            },
            {
   
                // 处理css中的img资源文件
                test:/\.(img|jpg|png|gif)$/,
                loader: