webpack的入门

自己配置webpack需要先安装好webpack,这里不建议全局安装,因为不同项目可能需要用到不同版本的webpack。现在package.json里添加一下命令,方便启动webpack,

"dev": "webpack --mode=development", //这是开发环境的打包,代码不会压缩
"dev": "webpack --mode=production",   //这是生产环境的打包,代码会压缩

 

webpack有四个核心概念:

  • 入口(entry)
  • 输出(output)
  • loader
  • 插件(plugins)

mode可以定义webpack打包后是生产环境还是开发环境,配置项有development , production。

入口entry顾名思义就是指定一个要打包的文件,这个是必须的。

输出output,就是指定打包压缩好的文件输出到哪个地方,这里注意需要用到绝对路径

const path = require('path')

module.exports = {
    mode:'production',
    //开发环境代码不压缩
    //生产环境代码压缩
    entry:'./demo1/src/index.js',
    // output不写的话就是默认路径
    output:{
        path:path.join(__dirname,'./demo1/dist'),
        filename:'main.js'
    }
}

loader是加载器,webpack只能识别js的模块,对于css和图片或者其他文件是没办法识别的,所以需要另外的加载器来实现这个功能。

plugin是插件,webpack的一些功能不是很完善,需要引入其他的插件来实现某些功能,比如打包后的html文件需要改变一下引用地址,这时候需要htmlWebpackPlugin插件来实现

const path = require('path')
  const HtmlWebapckPlugin = require('html-webpack-plugin')  //引入插件

module.exports = {
    mode:'production',
    entry:"./demo3/src/index.js",
    // output不写的话就是默认路径
    output:{
        path:path.join(__dirname,'./demo3/dist'),
        // 加上hash值可以每次重新打包一个新的,不加也可以更新文件的内容
        filename: 'main.js'
    },
    module:{
        rules:[
            //加载图片
            {
                test:/\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit:9999
                        }
                    }
                ]
            },
            // 加载css 
            {
                test: /\.(css)$/i,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
  //插件
    plugins:[
       new HtmlWebapckPlugin({
         filename:'index.html',
         template:path.join(__dirname,'../public/index.html')
       })
     ]

}

 

posted @ 2020-03-31 16:26  逆战-顶瓜瓜  阅读(144)  评论(0编辑  收藏  举报