使用webpack构建前端项目

项目所需npm包

//前期工作

//初始化package.json 文件
npm init
//安装webapck保存为开发依赖                       				
npm i webpack --save -dev
//安装webapck-cli（webapck4.0以上的版本才需安装）      				
npm i webpack-cli --save -dev				

//接下来安装开发所需的loader和plugin
//loader

//babel-loader                  将ES6+语法转换为ES5
npm install babel-loader babel-core babel-preset-env webpack
//css-loader         			解析css文件,使用css预处理器的安装对应的loader
npm install --save-dev css-loader
//style-loader              解析内联css
npm install style-loader --save-dev
//file-loader、url-loader       解析资源文件
npm install --save-dev file-loader
npm install --save-dev url-loader
//gzip-loader                  开启gzip压缩
npm install --save-dev gzip-loader
//postcss-loader               将css解析为AST（抽象语法树）这是因为webpack只识别javascript
npm i -D postcss-loader        // -D等价于--save -dev
//autoprefixer                 自动添加浏览器前缀，做兼容处理需要
npm i autoprefixer --save -dev
//如果是vue项目还需要vue和vue-loader
npm install vue vue-loader --save -dev

//plugin
//必选
//html-webpack-plugin      自动生成index.html，并动态引入js、css
npm i html-webpack-plugin --save-dev
//webpack-dev-server     在本地启动一个开发服务器，当有文件修改时会自动重新打包，并刷新浏览器页面
npm i webpack-dev-server cross-env --save-dev
//mini-css-extract-plugin    生产环境拆分css文件，打包为单独的css文件
npm i mini-css-extract-plugin --save-dev
//可选
//clean-webpack-plugin     执行build时自动清除之前打包的缓存文件
npm i clean-webpack-plugin --save-dev

webpack.config.js配置

const path = require('path');        //node路径解析模块
const cleanwebpackplugin = require("clean-webpack-plugin");
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
	entry: path.join(__dirname, 'src/main.js'),
	output: {
		path: path.join(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	module:{[
		{
            test: /\.vue$/,
            loader: 'vue-loader'
        },
        {
            test: /\.css$/,
            use: [
	            'style-loader',
	            'css-loader',
	            {
			      loader: 'postcss-loader',
			      options: {
			        plugins: [
			          require('autoprefixer')
			        ]
			      }
			    },
			    {
		            loader: MiniCssExtractPlugin.loader,
		            options: {
		              publicPath: '../',
		              hmr: process.env.NODE_ENV === ‘development’   
		            }
		        },
            ]
        },
        {
            test: /\.(gif|jpg|jpeg|png|svg)$/i,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 50,
                        name: 'dist/assest/images/[name]-[hash:5].[ext]'
                    }
                },
                {
	            	loader: 'file-loader',
	            	options: {
						name: '[path][name].[ext]',
						publicPath: 'src/assets/'            //存储资源的路径
					}
	          	}
            ]
        },
        {
    		test: /\.js$/,
    		exclude: /(node_modules|bower_components)/,
		    use: {
			      loader: 'babel-loader',
			      options: {
			        presets: ['@babel/preset-env'],
			        plugins: ['@babel/transform-runtime']
			      }
			 }
		}
	]},
	plugins:[
		new HtmlWebpackPlugin({
			template: './src/index.html', //生成的新的html文件所依赖的模板
			filename: 'index.html' //生成的新的html文件的名字
		}),
		new MiniCssExtractPlugin({
            filename:"[name].css"
        }),
		new cleanwebpackplugin(["dist"]),
        new webpack.HotModuleReplacementPlugin()
	]
}

package.json命令配置

"scripts": {
    "serve": "webpack-dev-server --config webpack.config.js",
    "build": "webpack --config webpack.config.js"
},

到此基本配置完成，进阶配置之后研究透彻了再发一篇