webpack入门

首先我们创一个demo文件夹，下面创一个dist文件夹作为打包后的文件夹，src为自己项目文件。

src文件目录如下：

接下来在js文件夹下建立一个main.js文件。此文件很重要，作为一整个文件的入口文件。用来导入该项目的css和js。 例如下图：

接下来在该demo目录下执行命令

# 安装淘宝镜像

npm install -g cnpm --registry=http://registry.npm.taobao.org

#初始化npm
cnpm init 

1、全局安装webpack

cnpm install webpack -g

2、保存到开发环境和生产环境中

cnpm install --save-dev webpack

3、安装到项目里

cnpm install -D webpack-cli

4、 安装插件

cnpm install html-webpack-plugin

5、安装css-loader和style-loader

npm install --save-dev style-loader css-loader

此时需要创建一个webpack配置文件夹

webpack.config.js

const path = require("path");
const htmlPlugin = require('html-webpack-plugin');
module.exports = {
	entry:{
		entry:__dirname+"/src/js/main.js" // webpack入口文件
	},
	output:{
		path:__dirname+"/dist", // 导出文件夹命名
		filename:"bundle.js" // 导出文件命名
	},
	devServer:{
		port:8082, // 端口
		contentBase:path.resolve(__dirname,'dist'),
		inline:true
	},
	module:{
		rules:[
			{
			  test:/\.css$/,
			  use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
			},
			{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:500000
                   }
               }]
            }
		]
	},
	plugins:[
		new htmlPlugin({
            minify:{
                removeAttributeQuotes:true
            },
            hash:true,
            template:'./src/index.html'
           
        })
    ],
}

接下来执行以下命令打包

webpack

可以看到dist文件下多了些文件，这就是打包后的文件，成功啦~