webpack配置的基本介绍
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 文件,这是我们前端关注的问题: 请听下回分解。。。。
webpack配置的基本介绍的更多相关文章
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- webpack配置这一篇就够
最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...
- 前端工程化(二)---webpack配置
导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...
- vue-cli中webpack配置详解
vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...
- vue-cli 中的 webpack 配置详解
本篇文章主要介绍了 vue-cli 2.8.2 中的 webpack 配置详解, 做个学习笔记 版本 vue-cli 2.8.1 (终端通过 vue -V 可查看) vue 2.2.2 webpack ...
- 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
- webpack常用配置项配置文件介绍
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- webpack配置指南
Webpack已经出来很久了,相关的文章也有很多,然而比较完整的例子却不是很多,让很多新手不知如何下脚,下脚了又遍地坑 说实话,官方文档是蛮乱的,而且有些还是错的错的..很多配置问题只有爬过坑才知道 ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
随机推荐
- HDU - 5071 Chat(模拟)
原题链接 题意:有各种操作,模拟这个程序并输出每次操作的信息 分析:恶心模拟题...用个map记录一下各个等级女孩的谈话数,同时也便于查找权值为u的在不在队列里.因为n很小,其他就暴力模拟了. #in ...
- linux常用命令说明
1. 基础快捷键使用 ctrl + c:停止进程 ctrl + l:清屏 ctrl + r:搜索历史命令 ctrl + q:退出 2.常用目录或文件夹命令 说明:安装linux时,创建一个itcast ...
- 054、准备 macvlan环境(2019-03-21 周四)
参考https://www.cnblogs.com/CloudMan6/p/7352620.html 除了overlay,docker还开发了另一个支持跨主机容器网络的 driver :macvl ...
- GNU Screen Usage
分屏: 1.在终端输入screen命令 2.Ctrl+a 然后shift+s 上下分屏,切换到下方Ctrl+a tab然后新建一个window(Ctrl+a c) 3.切换到上方,Ctrl+a tab ...
- PHP文件管理—实现网盘以及压缩包的功能操作
代码如下: 1.主页面file_zip.php <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- Unet网络
近期利用遥感影像进行路网提取,利用Unet网络进行图像分割 介绍如下: U-net网络非常简单,前半部分作用是特征提取,后半部分是上采样.在一些文献中也把这样的结构叫做编码器-解码器结构.由于此网络整 ...
- aspnetpager使用介绍
AspNetPager分页控件解决了分页中的很多问题,直接采用该控件进行分页处理,会将繁琐的分页工作变得简单化, 效果如下: 下面是我如何使用AspNetPager控件进行分页处理的详细代码: 1.首 ...
- article2pdf (Wordpress plug-in) Multiple vulnerabilities(CVE-2019-1000031, CVE-2019-1010257)
Product: article2pdf (Wordpress plug-in)Product Website: https://wordpress.org/plugins/article2pdf/A ...
- 第27月第10天 cmake
1.error: tool 'xcodebuild' requires Xcode的解决办法 sudo xcode-select --switch /Applications/Xcode.app/Co ...
- JDK自带的LinkedHashMap来实现LRU算法
1 代码如下 public class LRULinkedHashMap<K, V> extends LinkedHashMap<K, V> { private final i ...