webpack配置的基本介绍

简介: https://github.com/DDFE/DDFE-blog/issues/10 全局安装 webpack :(当前笔记版本: webpack  3.10.0 , mac环境)1. npm install webpack -g2.

https://github.com/DDFE/DDFE-blog/issues/10

 

全局安装 webpack :(当前笔记版本: webpack  3.10.0 , mac环境)

1. npm install webpack -g

2.新建webpack 的项目: mkdir webpack-demo 

3. 进入项目并初始化: cd webpack-test  npm init

执行完命令后就会出现初始化这个项目的基本信息,如果不想做介绍,可以按照默认的往下进行,直接enter 就可以;

之后文件加多了 package.json 的文件: 

4. 安装包, npm install 

 

5.安装 webapck的包   npm install webpack --save

安装中。。。

用vim 查看 package.json vim package.json

6.在该webpack-test 的目录下 新建 src 文件夹,放我们的源码文件,新建 dist 文件夹,放打包文件的盛放文件夹;

7.在 src 下新建js 文件,a.js   b.js   c.js

 

8. 新建配置文件 , webpack.config,js

const path = require('path');

module.exports = {
  entry: {
    pageOne: './src/script/a.js',
    pageTwo: './src/script/b.js',
    pageThree: './src/script/c.js'
  },
  output: {
    // path: './dist/js',
    path: path.resolve(__dirname, 'dist/js'), // The output directory as **absolute path** (required). 此处需要配置一个绝对路径 
    filename: '[hash]-[name].js'
  }
}
 
entry: 入口文件,可一个,可多个
output: 输出文件,写死 filename, 表示输出一个文件,   '[hash]-[name].js' 表示按照哈希值和chunks 的值命名的对应的打包文件9

9. 执行这个配置文件:需要利用npm 脚本来完成,当然在命令行可以写这些打包命令,我们把命令写进脚本:

 "webpack": "webpack --config webpack.config.js --progress --display-reasons --colors"

  --progress --display-reasons --colors     命令执行时的配置参数,表示 打包进程 打包的理由,彩色

打包后:

文件夹:

打包js完成了,如何打包html 文件,这是我们前端关注的问题: 请听下回分解。。。。

目录
相关文章
|
3天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
16 5
|
5天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
24 7
|
6天前
|
前端开发
配置 Webpack 实现热更新
【10月更文挑战第23天】还可以进一步深入探讨热更新的具体实现细节、不同场景下的应用案例,以及如何针对特定需求进行优化等方面的内容。通过全面、系统地了解 Webpack 热更新的配置方法,能够更好地利用这一功能,提升项目的开发效率和性能表现。同时,要不断关注 Webpack 及相关技术的发展动态,以便及时掌握最新的热更新技术和最佳实践。
|
23天前
|
JavaScript
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
这篇文章是关于如何在webpack环境中配置Vue.js,包括安装Vue.js、解决报错、理解el与template的区别、使用SPA模式、抽离模板为对象、封装为单独的js文件、安装vue-loader时遇到的问题及解决方案,以及整个过程的总结。
65 2
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
|
4天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
13 2
|
6天前
|
存储 缓存 监控
配置 Webpack 5 持久化缓存时需要注意哪些安全问题?
【10月更文挑战第23天】通过全面、系统地分析和应对安全问题,能够更好地保障 Webpack 5 持久化缓存的安全,为项目的成功构建和运行提供坚实的安全基础。同时,要保持对安全技术的关注和学习,不断提升安全防范能力,以应对日益复杂的安全挑战。
|
18天前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
42 1
|
18天前
|
前端开发 JavaScript
Webpack 中多个 Loader 的配置
【10月更文挑战第12天】使用多个 Loader 进行配置是 Webpack 中常见的操作,可以实现对各种资源的精细处理和优化。在配置时,需要根据具体需求合理选择和排列 Loader,并注意它们之间的顺序和交互关系。同时,不断了解和掌握新的 Loader 以及它们的特性,有助于更好地发挥 Webpack 的强大功能,提升项目的开发效率和质量。通过深入理解和熟练运用多个 Loader 的配置方法,你将能够更加灵活地处理各种资源,满足项目的多样化需求。
36 2
|
2月前
|
前端开发 JavaScript Shell
「offer来了」从基础配置到高级配置,16大知识点带你巩固webpack知识体系
该文章系统地总结了Webpack从基础配置到高级配置的16个关键知识点,包括Loader与Plugin的工作机制、源代码映射(Source Map)的使用、模块划分策略、性能优化技巧等内容,并提供了实际配置示例帮助理解和应用。
「offer来了」从基础配置到高级配置,16大知识点带你巩固webpack知识体系
|
2月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
70 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)