webpack 打包vue项目
webpack介绍
一个流行的前端项目构建工具(打包工具),可以解决当前web开发中所面临的困境。
webpack提供了友好的模块化支持,一级代码压缩混淆,处理js兼容问题、性能优化等强大的功能,从而让程序员把工作重心放到具体的功能实现上,提高了开发效率和项目的可维护性。
具体打包成的文件
基本使用(创建列表隔行变色项目)
1、新建项目空白目录,并运行npm init -Y命令,初始化。
2、新建src源代码目录。
3、新建src -> index.html首页
4、初始化首页基本结构
5、运行npm install jquery -s命令,安装JQuery。
6、通过模块化的形式,实现效果。
一、在项目中安装和配置webpack
1、运行npm install webpack webpack-cli -D命令安装。
2、在项目根目录中,创建名为webpack.config.js的webpack配置文件。
3、在webpack的配置文件中,初始化如下基本配置:
module.exports = {
mode: 'development' // 开发模式(转化出来的代码不会压缩混淆)
// mode用来指定构建模式
// production 发布模式(转化出来的代码压缩混淆,转化时间长)
}
4、在package.json配置文件中的script节点下,新增dev脚本如下:
// An highlighted block
"script": {
"dev": "webpack" // script节点下的脚本,可以通过npm run 执行
}