Webpack详细打包步骤

----------------------简单打包流程-----------------------
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-devpath: 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
}

Webpack详细打包步骤相关推荐

windows下安装nodejs、webpack及打包步骤
https://blog.csdn.net/Henery_002/article/details/78016575
Vue项目打包步骤详细流程，新手必需掌握的知识点！
Vue项目打包步骤 Vue项目打包流程介绍生成打包报告修改默认配置指定打包入口通过external加载外部CDN资源优化组件库的打包首页内容定制路由懒加载 Vue项目打包流程介绍新手必 ...
k8s v1.9.6 超详细搭建步骤
部署说明 k8s新的版本与之前1.5的部署方式发生改变,官方将kubernetes大组件中的服务例如(kube-proxy.kube-api等服务)剥离出来封装成容器的形式来简化部署的方式.以下为三个 ...
webpack来打包你的vue项目，如发现你的vendor.js过大
1.如果你使用了webpack来打包你的vue项目,如发现你的vendor.js过大则可以参考本文的解决方案. 2.造成过大的原因是因为在main.js导入第三库太多时,webpack合并js时生成了 ...
html打包成app的缓存问题,webpack 独立打包与缓存处理
关于微信公众号:前端呼啦圈(Love-FED) 个人博客:劳卜的博客知乎专栏:前端呼啦圈前言先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpa ...
手写webpack得打包流程
目录搭建一个最基础的环境(用于测试) 本地新建一个文件夹(打包库)webpack-meself 分析webpack环境打包后的js my-pack.js文件书写手写Compiler.js 解析包, ...
基于Mui与H5+开发webapp的Android原生工程打包步骤（使用新版本5+SDK与Android studio）（部分内容转自dcloud官网）...
文章背景: dcloud官网给出的打包步骤对于有一定安卓打包基础的同学来说比较容易掌握,但是对于webapp小白来讲有的地方可能没有说的太具体.下面我给大家介绍的详细一点,保证大家按照步骤就能学会打包 ...
Webpack基础打包
认识webpack 事实上随着前端的快速发展,目前前端的开发已经变的越来越复杂了: 比如开发过程中我们需要通过模块化的方式来开发: 比如也会使用一些高级的特性来加快我们的开发效率或者安全性,比如通过E ...
webpack系列 —— 打包原理
为什么要使用webpack? 如今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.为了简化开发的复杂度,前端社区涌现出了很多好的实践方法: 模块化,让我 ...

Webpack详细打包步骤

Webpack详细打包步骤相关推荐

最新文章

热门文章