webpack的使用步骤

• 初始化项目

npm init -y

• 安装webpack

npm i webpack webpack-cli@3.3.11 -D 
// -D 用于开发环境
// -S 就用于开发也用于生产

• 配置package.json

{
	"scripts":{
    	"build":"webpack ./要打包的文件路径"
    }
}

• 打包

npm run build

使用配置文件

在项目的根目录下创建一个文件名为：webpack.config.js

module.exports={
	// 配置入口
    entry:'./src/main.js',
    //配置项：出口
    output:{
    	// 打包后生成的文件名
        filename:'[name].js',
        //打包后文件保存的目录
        path:path.join(__dirname,'dist')
    },
    // 导入vue-loader
    const VueLoaderPlugin=require('vue-loader/lib/plugin')
    // 项目的模式
    mode:'development', //开发模式  production 生产模式
    // 配置文件解析
    resolve:{
    	// alias:别名
        alias:{
        	"@":path.join(__dirname,'src)
        },
        // extensions:可以省略的后缀名
        extensions:[".js",".css",".vue"]
    },
    // 源码映射
    devtool:'inline-source-map',
    //将源码生成到别的文件中：devtool:'source-map'
    
    // loader作用（由于webpack默认是可以打包js文件，但无法打包其他文件，如果想打包其他文件可以借助webpack中loader来进行打包），例：
    // 打包 css的loader
    // npm i style-loader css-loader -D
    // 配置loader
    module:{
    	rules:[
        	{
            	test:/\.css$/,
                use:['style-loader','css-loader']
            },
            // 文件loader
            {
            	test:/\.(png|jpg|gif)$/,
                use:[
                	{
                    	loader:'file-loader',
                        options:{
                        	// 配置输出图片的目录
                            outputPath:'./img'
                        }
                    }
                ]
            },
            // 默认情况webpack是无法打包后缀名为.vue的文件、如果要打包需要借助第三方包：npm i vue-loader vue-template-compiler
            // 配置vue-loader
            {
            	test:/\.vue$/,
                use:['vue-loader']
            }
        ]
    },
    plugins:[
    	// 将vue-loader 作为插件来使用
        new VueLoaderPlugin()
    ]
}

插件

webpack 额外的功能

• 插件-HtmlWebpackPlugin 作用：在dist目录下自动生成一个html文件

// 下载插件 npm i html-webpack-plugin -S
//配置插件
const HtmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
	plugins:[
    	new HtmlWebpackPlugin({
        	template:'需要打包的HTML文件路径'
        })
    ]
}

• clean-webpack-plugin 作用：用于清除dist目录

// 下载插件 npm i clean-webpack-plugin -S
//配置插件
const {CleanWebpackPlugin}=require('html-webpack-plugin')

module.exports={
	plugins:[
    	new CleanWebpackPlugin()
    ]
}

• webpack-dev-server 作用：可以开启一个服务器，具有实时更新的功能

// 下载插件 npm i webpack-dev-server -S
//配置插件
const {CleanWebpackPlugin}=require('html-webpack-plugin')

module.exports={
	devServer:{}
}
//配置指令(package.json)
{
	"scripts":{
    	"serve":"webpack-dev-server --config webpack.config.js --mode development"
    }
}