一、webpack开发环境基本配置

1.目录结构

src -css -imgs -js -media webpack.config.js

2.webpack.config.js配置

// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // 入口文件
    entry: './src/js/main.js',
    // 输出文件
    output: {
        // 输出文件名
        filename: 'js/built.js',
        // 输出路径
		// __dirname  nodejs的变量，代表当前文件的目录绝对路径
        path: resolve((__dirname,'build')
    },
    module: {
        rules: [
            // loader的配置
            // 处理less资源
            {
                test: /\.less$/,
				use: ['style-loader','css-loader','less-loader'],
            },
            //处理css
			{
				test: /\.css$/,
				use: ['style-loader','css-loader'],
			},
            //处理图片资源
			{
				test: /\.(jpg|png|gif)$/,
				loader: 'url-loader',
				options: {
					limit: 8*1024,
					name: '[hash:10].[ext]',
					outputPath: 'imgs'
				}
			},
            //处理html中的img标签
			{
				test: /\.html$/,
				loader: 'html-loader'
			},
            //处理其他资源
			{
				exclude: /\.(html|js|css|less|jpg|png|gif)$/,
				loader: 'file-loader',
				options: {
					name: '[hash:10].[ext]',
					outputPath: 'media'
				}
			}
        ]
    },
    plugins: [
        // html-webpack-plugin
        // 功能：默认创建一个空的html文件，自动引入打包输出的所有资源
		// 需求：需要有结构的html文件
        new HtmlWebpackPlugin({
			// 复制./src/index.html文件，并自动引入打包输出的所有资源
			template:'./src/index.html'
		})
    ],
    mode: 'development',
    devServer:{
		// 项目构建后的路径
		contentBase: resolve(__dirname,'build'),
		// 启动gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        // 自动打开浏览器
        open: true
	}
}

3.编译之后目录结构

• build
• -imgs
• -js
• -media
• -index.html
• src
• -css
• -imgs
• -js
• -media
• webpack.config.js