使用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"
},

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