Webpack详细打包步骤
----------------------简单打包流程-----------------------1. 1.安装webpackcnpm install webpack webpack-cli-g;新建一个src文件,在其目录下新建一个main.js入口文件(如果都已经生成存在则不用管)2. 初始化项目包npm init -y 生成package.json3. 本地安装webpack依赖cnpm
·
----------------------简单打包流程-----------------------
1. 1.安装webpack
cnpm install webpack webpack-cli -g;
新建一个src文件,在其目录下新建一个main.js入口文件(如果都已经生成存在则不用管)
2. 初始化项目包
npm init -y 生成package.json
3. 本地安装webpack依赖
cnpm install webpack webpack-cli --save-dev
4. webpack打包
webpack ./src/main.js -o ./dist/bundle.js --modedevelopment //开发模式
webpack ./src/main.js -o ./dist/bundle.js --modeproduction //生产模式
---------------------配置文件打包流程---------------------
前提你已经进行以上1,2,3步骤,再新建webpack.config.js文件,并配置它
//以下配置完毕,执行webpack命令开始打包,前提记得cnpm install
const path = require('path');//引入路径模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//入口文件
entry:'./src/main.js',
//输出文件
output:{
filename: 'bundle.js', //输出名称,使用到了文件cnpm install file-loader --save-dev
path: path.resolve(__dirname, 'dist'), //输出的路径
},
mode: 'production', //生产模式
module: {
rules: [
{ test: /\.css$/, use: ['style-loader','css-loader' ]},//匹配css文件,将css转换为js
//安装依赖cnpm install style-loader css-loader --save-dev
{ test: /\.(jpg|png|gif)$/,
use: 'url-loader',
options:{limit8*1024,esMoudle:flase,name:'[hash:10].[ext]'}
},
//匹配图片文件,图片小于8k,进行base 64处理,取图片hash前10位
//安装依赖cnpm install url-loader --save-dev
{ test:/\.html$/,loader:'html-loader'}
//安装依赖cnpm install html-loader --save-dev
],
},
plugins: [
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({ template: './src/index.html' }),//通过cnpm install html-webpack-plugin --save -dev安装
],
devServer:{
//项目构建路径
contentBase:path: path.resolve(__dirname, 'dist'),
//启动gzip压缩
compress:true,
//端口
port:3000,
//自动打开浏览器
open:true,
}
//安装cnpm install webpack-dev-server -g 进行启动,如果执行错误,查看package.json文件安装依赖,cnpm install
}
更多推荐
所有评论(0)