webpack打包简单案例
2019-03-12 21:54
232 查看
一、关于webpack安装
前提:安装好node.js,用npm下载webpack
在根目录下 npm -i -g webpack(可以暂时不安装cli),没有权限可以用sudo
二、关于项目搭建
建立一个webpack项目文件夹,在文件夹中局部安装webpack
cd webpack
npm -i -d webpack
快速初始化项目
npm init -y
创建一个src文件夹存放源文件,创建你的源文件index.js,写下你的代码
创建一个存放打包后的文件夹dist
三、开始打包
命令:webpack ./src./index.js(入口) -o ./dist./bundle.js(创建打包的输出文件)
便于修改,最好监听变化
命令:webpack --watch ./src/index.js -o ./dist/bundle.js
在index.js文件有变化时,输出文件会随之变化
压缩文件:(4版之后好像会自动压缩)
命令:webpack -p ./src/index.js -o ./dist/bundle.js
相关文章推荐
- (笔记)webpack安装、配置、简单的项目打包、插件介绍
- webpack的最简单应用,只使用js与css的打包
- webpack打包多html开发案例新
- 一个简单的webpack打包
- webpack 入门(一个简单打包配置构建)
- webpack 打包一个简单react组件
- webpack 打包一个简单react组件
- webpack的最简单应用,只使用js与css的打包
- Webpack打包简单的使用ECharts,模块化处理的简单演示
- webpack 打包后文件简单处理 HtmlWebpackPlugin
- node.js学习之webpack打包react最简单用法
- webpack打包多html开发案例
- Less与TypeScript的简单理解与应用,并使用WebPack打包静态页面
- vue-cli内部webpack的打包优化
- webpack打包静态资源和动态资源
- webpack4 css打包压缩问题的解决
- 如何解决webpack打包后,dist文件过大的问题
- 前端打包利器:webpack工具
- webpack打包时出现的错误
- 手把手教你webpack3(2)简单指令(npm脚本)