【webpack4】第三部分 开发环境基本配置

【webpack4】第三部分 开发环境基本配置

3. 开发环境基本配置

3.1 准备工作

1. npm init 初始化
2. npm i webpack webpack-cli -g 下载webpack 和webpack-cli （全局安装）
3. npm i webpack webpack-cli -D 下载webpack和webpack-cli（本地安装）
4. 运行命令：webpack

    webpack入口文件
    运行指令
        - 开发环境
            webpack ./src/index.js -o ./build/built.js --mode=development

            上面代码的含义：webpack以 ./src/index.js 为入口文件开始进行打包，
            将打包好的文件输出到./build/built.js，模式为开发模式

        - 生产环境
            webpack ./src/index.js -o ./build/built.js --mode=production

            上面代码的含义：webpack以 ./src/index.js 为入口文件开始进行打包，
            将打包好的文件输出到./build/built.js，模式为生产模式

3.2 小结

1.结论

• webpack 能够编译打包 js 和 json 文件。
• 能将 es6 的模块化语法转换成浏览器能识别的语法，能压缩代码。
• 生产环境比开发环境多了一个压缩js代码的功能

2.问题

• 不能编译打包 css、img 等文件。
• 不能将 js 的 es6 基本语法转化为 es5 以下语法。

3.3 打包样式资源

创建名为webpack.config.js文件，在该文件中进行配置

作用：指示webpack干哪些活，运行webpack指令时，会加载里面的配置

需要下载的包：

1. npm i css-loader style-loader -D 打包css需要下载的包

2. npm i less-loader -D 打包less需要下载的包

webpack.config.js

// resolve用来去拼接绝对路径的方法
const {resolve} = require('path')

//webpack配置
module.exports = {
    //配置webpack入口文件
    entry:'./src/index.js',
    
    //配置输出文件（打包后的位置）
    output:{
        filename:'built.js',
      // dirname是nodejs 的变量，代表当前文件的目录绝对路径
        path:resolve(__dirname,'build')
    },

    //配置loader
    module:{
        //配置详细的loader
        rules:[
        {
            //配置匹配的文件，正式则表达式
            test:/\.css$/,

            /*
                使用哪些loader进行处理
                注意：
                    - use的执行顺序是从下到上，从右到左，依次执行
            */
            use:[
                //创建style标签将js文件中的样式资源添加到head中生效
                'style-loader',
                //将css文件变成commonjs模块，然后加载到js中，里面内容样式变成字符串
                'css-loader'
            ]
        },
        {
            // 匹配文件
            test:/\.less$/,

            // 使用哪些loader进行处理
            use:[
                "style-loader",
                "css-loader",
              // 将less文件转化为css文件
                "less-loader"
            ]
        }
    ]
    },

    //配置plugs
     plugs:[],

    //配置模式
    mode: 'development'
}

3.4 打包HTML资源

需要下载的包：

1. npm install html-webpack-plugin -D 打包html需要下载的包

webpack.config.js

const {resolve}  = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口文件
    entry:'./src/index.js',
    //打包地址
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    //插件
    plugins:[
        // 功能：默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS）
        new HtmlWebpackPlugin({
            // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
            template:'./src/index.html'
        })
        
    ]

}

3.5 打包图片资源

需要下载的包：

1. npm i url-loader file-loader -D 打包在css和less下写的img图片

2. npm i html-loader -D 打包在html中写的img图片

webpack.config.js

const {resolve}  = require('path')
const HtmlWebpackPlugin  = require('html-webpack-plugin')

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                //配置样式资源
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                //配置打包图片资源
                //问题只能打包css和less下的图片，不能打包html下的图片
                test:/\.(jpg|png|webp|gif)$/,
                //下载url-loader和file-loader,因为url-loader依赖file-loader
                //只有一个loader可以这样写
                loader:'url-loader',
                //配置项
                options:{
                    /*
                        - 下面代码表示：当图片小于9kb的图片，就会被base64处理
                        - base64处理的好处： 减少请求的数量（减轻服务器的压力）
                        - 坏处： 图片文件体积会变大（文件请求的速度变慢）
                     */
                    limit: 9*1024, 
                  
                    /*  问题：因为 url-loader 默认使用es6 模块化解析，而 html-loader 引入图片是commonjs
                        解析时会出问题：[object Module]
                        解决：关闭 url-loader 的 es6 模块化，使用 commonjs 解析
                     */
                    esModule:false
                  
                    /* 
                        给文件进行重命名
                        [hash:10] : 去hash值的前10位
                        [ext]: 表示取文件原来的扩展名（例如 .jpg）
                    */
                   name:'[hash:10].[ext]'
                }
            },
            {
                test:/\.html$/,
              	// 处理 html 文件的 img 图片（负责引入 img，从而能被url-loader 进行处理）
                loader:'html-loader',
                options:{
                    esModule:false
                }
            }

        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development'
}

3.6 打包其他资源

webpack.config.js

const {resolve}  = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                //排除html，js，css就是其他资源
                exclude:/\.(html|css|js)$/,
                loader:'file-loader'
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development'
}

3.7 devServer

​ deServe 作用：自动打包我们更新的代码(很像nodemon)

​ 开启服务器：用来自动编译，自动打开浏览器，自动刷新浏览器

​ 特点：只会在内存中编译打包，不会有任何的输出

​ 下载的包：npm i webpack-dev-server -D

​ 启动指令：npx webpack-dev-server

webpack.config.js

const {resolve} = require('path')
const HtmlWebpackPlugin  = require('html-webpack-plugin')

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            //打包css资源
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            //打包其他资源
            {
                exclude:/\.(html|js|css)$/,
                loader:'file-loader'
            }
        ]
    },
    plugins:[
        // 打包html资源
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development',

    /* 
        deServe 开启服务器：用来自动编译，自动打开浏览器，自动刷新浏览器
        特点：只会在内存中编译打包，不会有任何的输出
        启动指令：webpack-dev-server
    */
   devServer:{
    // 项目构建后的路径
    contentBase:resolve(__dirname,'build'),
    // 压缩
    compress:true,
    //端口号
    port:3000,
    //自动打开浏览器
    open:true
   }
    
}

3.8 开发环境基本配置

webpack.config.js

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,"build")
    },
    module:{
        rules:[
            //打包css资源
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            //打包less资源
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            //打包图片资源(css/less)
            {
                test:/\.(jpg|png|webp|gif)$/,
                loader:'url-loader',
                options:{
                    limit: 9*1024,
                    name:'[hash:10].[ext]',
                    esModule:false,
                    // 将打包好的图片资源放在imgs文件加下
                    outputPath:'imgs'
                }
            },
            //打包html中的图片
            {
                test:/\.html$/,
                loader:'html-loader',
                options:{
                    esModule:false
                }
            },
            //打包其他资源
            {
                exclude:/\.(html|css|less|js|jpg|png|webp|gif)$/,
                loader:'file-loader',
                options:{
                    // 将打包好的图片资源放在media文件加下
                    outputPath:'media'
                }
            }
        ]
    },
    plugins:[
      //处理html插件
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    devtool: 'inline-source-map',
  //开启服务器
    devServer:{
        contentBase:resolve(__dirname,'build'),
        compress:true,
        open:true,
        port:8001
    },
  
    mode:'development'
 }

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！