git 创建webpack项目_Webpack入门:从安装到配置
文档
webpack 用于编译 JavaScript 模块。
一旦完成安装,你就可以通过 webpack 的 CLI 或 API 与其配合交互。
这里以入门者的角度(中文)介绍 webpack 的常用配置。当 webpack 更新后,以下细节可能有出入,但是总体的核心不变。
详见 webpack 的 英文文档 和 中文文档。
基本安装
版本信息
首先通过 npm 查看 webpack 目前的版本信息。
$ npm info webpack
可以看到下面的信息:
// webpack@4.41.2 | MIT | deps: 23 | versions: 625// 可执行文件
// bin: webpack// 所有版本
// dist-tags:
// latest: 4.41.2 legacy: 1.15.0 next: 5.0.0-beta.9
// webpack-2: 2.7.0 webpack-3: 3.12.0
我们使用默认的最新版本 webpack4。这里推荐使用 yarn 代替 npm。
初始化安装
新建(进入)项目,初始化 yarn 创建 package.json 后,在本地安装。
$ mkdir webpack-demo && cd webpack-demo
$ yarn init -y
$ yarn add webpack webpack-cli --dev
安装成功后,项目中出现名为 node_modules 的文件夹和名为 yarn.lock 以及 package.json 的文件。
创建结构/目录
在根目录下新建 src 目录 和 index.js 文件。
$ mkdir src
$ touch src/index.js
$ echo 'console.log('success')' >> src/index.js
启动 webpack
使用本地路径
我们的 webpack 因为是装在本地,所以需要用路径来使用。
$ ./node_modules/.bin/webpack
使用 npx 命令
使用 npx 来启动 webpack,会自动在当前目录中寻找 webpack 的可执行文件。
注意:在 Windows 系统中某些情况可能存在不稳定性,比如 安装 node 时路径有空格等。这时需要使用第一种方法。
$ npx webpack
webpack 在当前目录的 dist 目录中输出结果。此时应有转译后的 main.js 文件。
这是webpack自带的一个加载器:babel-loader实现的。
优化生成方式-build
在 package.json 文件中 设置 script脚本中的 build方法。
该方法将清空dist目录,并重新运行webpack,重新生成dist目录和其中的文件;更加利于开发。
package.json
Mac/Linux
{"script": {+ "build": "rm -rf dist; webpack"}
}
Windows
{"script": {+ "build": "rm -rf dist && webpack"}
}
使用命令
这样你以后可以用下面的方法取代npx命令。
$ yarn build
或
$ npm run build
用插件清理dist目录
你也可以不用build方法,而是安装一个清理插件clean-webpack-plugin。工作原理和build方法相似。
安装插件:
$ yarn add clean-webpack-plugin --dev
配置插件:
webpack.config.js
+ const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {entry: {app: './src/index.js',print: './src/main.js'},plugins: [
+ new CleanWebpackPlugin(['dist'])]};
这样在你每次运行 npx webpack 时,只会重新生成新的文件而看不到旧的文件。
注意:最好使用配置script脚本的方法来使用build实现这个功能,而不推荐使用插件。这是为了下面自定义不同模式的配置文件做基础。
配置 configuration
这时候警告提示需要设置配置文件中的转译模式。需要对配置文件进行配置。
在操作之前,最好把它整成一个 git,每一步都 git。
注意:以下每一步都是在上一步的操作基础上进行操作,有些相同相似的或不需要的代码则没有展示。请忽略代码中的 “+”(加号表示局部增加或替换代码)和相关注释说明代码。
如果你有另外的需求,最后参阅原始文档进行配置。
路径及模式
在根目录下创建配置文件。
$ touch webpack.config.js
进入配置文件,写入以下代码。
webpack.config.js
const path = require("path");module.exports = {// 转译模式: development 开发者模式 / production 产品模式mode: "development",// 输入源entry: "./src/index.js",// 输出output: {// 文件名filename: "main.js",// 输出路径path: path.resolve(__dirname, "dist")}
};
缓存需求文件名
可以设置为生成 包含 MD5哈希 的字符串插入文件名用于 HTTP缓存。
webpack.config.js
module.exports = {output: {+ filename: "main.[contenthash].js"}};
自动生成HTML
webpack 可以使用插件来自动生成 HTML。
在命令行安装插件:
$ yarn add html-webpack-plugin
安装后修改配置文件
webpack.config.js
+ const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {+ plugins: [
+ new HtmlWebpackPlugin({//html 标题
+ title: 'Output Management'
+ })
+ ],};
- 执行命令构建命令 yarn build 可以在dist目录中生成一个 index.html文件。
- 该文件会自动引入你项目中的外部文件
- 如果你在外部文件名中引入了 MD5哈希字符串,那么每次 build 的同时 html文件也会自动更新。
- 引入js会在body标签的最后面加入 script链接。
- 引入 css 可以配置为以 style标签 形式插入还是 link标签 插入。
使用模板来生成html
你也可以使用项目中写好的 html模板 来让 webpack 生成新的 html 。
该模板要放在 src 目录下面的 assets 文件夹中。
$ mkdir src/assets
$ touch src/assets/index.html
在插件的 html 配置中再加入一行:
webpack.config.js
module.exports = {plugins: [new HtmlWebpackPlugin({+ template: 'src/assets/index.html'})],};
注意:如果你的模板存在但内容为空,webpack 只会生成一个只有引入外部文件链接的 空html文件。
模板中的内容会覆盖你在插件中的配置,比如说 title。
如果你想使用配置文件中的 title,请在模板中这样写:
<head>
+ <title><%= htmlWebpackPlugin.options.title %></title>
</head>
引入和自动生成CSS
首先在src目录中创建css文件,并在index.js文件中用import方法引入。
$ touch src/default.css
$ echo "body{background: red;}" >> src/default.css
$ echo "import './default.css'" >> src/index.js
安装加载器
$ yarn add css-loader style-loader --dev
修改配置文件。
- css-loader的作用是如果发现任何以.css结尾的文件名,那么就处理文件并读到js文件中。
- style-loader的作用是把读到的内容变为html文件中的style标签并放入head标签中。
webpack.config.js
module.exports = {entry: './src/index.js',output: {filename: 'main.js',path: path.resolve(__dirname, 'dist')},
+ module: {+ rules: [
+ {+ test: /.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }};
使用 build 方法后在 dist 目录的 index.html 文件中插入 style 标签。
这是通过js文件来动态实现的,因此你需要在 dist 目录里创建一个 web服务器 才能看到效果。
分离抽成css文件
使用mini-css-extract-plugin来打包css文件,把css样式从js文件中提取到单独的css文件中。
$ yarn add mini-css-extract-plugin --dev
配置文件
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = {plugins: [
+ new MiniCssExtractPlugin({+ // Options similar to the same options in webpackOptions.output
+ // all options are optional
+ filename: '[name].[contenthash].css',
+ chunkFilename: '[id].[contenthash].css',
+ ignoreOrder: false, // Enable to remove warnings about conflicting order
+ }),],module: {rules: [{test: /.css$/,use: [
+ {+ loader: MiniCssExtractPlugin.loader,
+ options: {+ // you can specify a publicPath here
+ // by default it uses publicPath in webpackOptions.output
+ publicPath: '../',
+ hmr: process.env.NODE_ENV === 'development',
+ },
+ },'css-loader',],},],},};
使用build方法后,将会在dist目录里重新生成一个带有MD5哈希字符串的main.css文件,并且在html文件中以link标签方式从外部引入。
此方法会把所有通过import方式引入的CSS文件全部整合为一个文件,并且有根据引入顺序来排列内容。
预览页面-快速开发
使用webpack-dev-server可以设置一个简单的web服务器,无需build即可预览dist文件目录下的文件,并实现实时重新加载。
安装
在命令行
$ yarn add webpack-dev-server --dev
配置文件
修改配置文件,告诉开发服务器在哪里查找文件:
webpack.config.js
module.exports = {entry: {app: './src/index.js',print: './src/print.js'},
+ devtool: 'inline-source-map',
+ devServer: {+ contentBase: './dist'
+ }};
添加脚本命令
添加一个script脚本可以直接运行开发服务器。
package.json
{"script": {+ "start": "webpack-dev-server --open"}
}
"- -open" 表示自动打开浏览器,可以删除或保留。
只需运行
$ yarn start
或
$ npm run start
即可在 localhost:8080 创建服务。
小小盛的博客eden-sheng.cn
git 创建webpack项目_Webpack入门:从安装到配置相关推荐
- git 创建webpack项目_webpack项目的搭建及环境构建
现如今,webpack已经快速进入前端开发人员的眼线(从1.0到4.X的版本的更新迭代),给前端开发也带来了很大的突破,webpack可以分析项目结构,模块化打包机,处理模块化依赖,转换成浏览器可运行 ...
- git 创建webpack项目_近期总结:手动搭建react项目,将项目从自己的库引入到新的项目中使用...
背景:最近公司有这样一个需求,需要开发一个react工具类,这个工具类可以用在其他项目里使用,并且这个工具类比较大,需要多人协作开发. 这个项目主要由同事负责,于是同事就将这个工具类当成一个单独的 ...
- git 创建webpack项目_使用webpack手动创建一个完整项目的全过程
1.创建文件夹"webpack-study" 2.使用webstrom打开文件夹所在位置.在根目录上创建一个文件,文件命名为"src",在src文件下新建css ...
- git 创建webpack项目_从0到1开发一个小程序cli脚手架(一)创建页面/组件模版篇...
github地址: https://github.com/jinxuanzheng01/xdk-cli cli工具是什么? 在正文之前先大致描述下什么是cli工具, cli工具英文名command-l ...
- git 创建webpack项目_从 0 开始构建 webpack 项目【Webpack Book 翻译】
在开始之前,请确保你使用的是 Node 的最新版本.至少是最新的 LTS(长期支持)版本,本书的配置基于 LTS 版本所写,你的终端需要有 node 和 npm 命令,Yarn 也是一个不错的选择,也 ...
- git 创建webpack项目_一次create-react-app创建项目升级webpack的流水账
不再赘述为什么要升级webpack4,有兴趣的小伙伴可以看一下 知乎:如何评价webpack4 下面撸起袖子开干: 克隆项目,新建分支 git checkout -b feature_webpack_ ...
- vue(vue-cli+vue-router)+babel+webpack项目搭建入门(四)
vue(vue-cli+vue-router)+babel+webpack项目搭建入门<四> 本系列文章将介绍基于vue+webpack的前端项目的构建过程.文章分为四章内容,第一章介绍开 ...
- vue(vue-cli+vue-router)+babel+webpack项目搭建入门 (第二步)
vue(vue-cli+vue-router)+babel+webpack项目搭建入门<二> 本系列文章将介绍基于vue+webpack的前端项目的构建过程.文章分为四章内容,第一章介绍开 ...
- vue(vue-cli+vue-router)+babel+webpack项目搭建入门(三)
vue(vue-cli+vue-router)+babel+webpack项目搭建入门<三> 本系列文章将介绍基于vue+webpack的前端项目的构建过程.文章分为四章内容,第一章介绍开 ...
最新文章
- 第九章 Django框架——csrf请求伪造和csrf_token使用
- Swift中GCD与NSOperation相关
- Caffe学习笔记2
- mysql调优_MYSQL企业常用架构与调优经验分享
- linux查看日志命令_查看log日志基础命令
- HSRP的初步解析及典型应用2
- 董明珠:格力100%不会爆雷 爆雷的白马股不是真正白马股
- lozi混沌映射吸引子,使用python的matplotlib绘制,可以放大和缩小
- 最小采样频率计算公式_信号分析基础(五):信号采样与混叠概念
- 小象学院python网课值得吗-小象学院python
- SkyLine——3DGIS三维地理信息系统软件产品介绍
- 解决 v-for 出现的 warning:component lists rendered with v-for should have explicit keys
- Python做一个Kindle电子书下载助手,真香!
- rls最小二乘法 c语言,RLS递归最小二乘(最新整理)
- 51NOD - 1677treecnt
- 华为防火墙虚拟系统间互访
- 港股暴涨利好有哪些板块?
- 数组去重方法集锦(一)
- 邱锡鹏《神经网络与深度学习》 绪论
- java后端接口防止表单重复提交
热门文章
- SAP Fiori Elements 应用的 i18n 语法使用方式
- SAP Cloud for Customer前台发送到后台的HTTP请求,遇到错误该怎么分析
- SAP Spartacus 数据类型定义汇总
- Angular单元测试fixture.detectChanges()
- 关于有朋友询问,Spartacus,Fiori,SAP UI5这些术语的关系
- Angular getOrCreateInjectable的实现原理调试
- 一个利用System.gc和finalize研究Java垃圾回收机制的练习
- 如何使用ABAP异步RFC调用提升应用性能
- SAP Marketing Cloud功能简述(一)Contacts和Profiles
- 如何使用代码区分service contract和service contract quotation