大家好,又见面了,我是全栈君。
WebPack已经火了好久,几乎已经成为一个前端的必备技能,先翻译官网两句话。
-
WebPack是一个灵活的、可扩展的、公平的、可用于生产环境的、开源的模块打包器。
-
WebPack V1版本已经过时,请开发者们升级到V2。
这篇笔记是基于WebPack V2.2.1 开始。
安装(Installation)
-
npm install webpack -g
全局安装webpack,这样可以在全局使用webpack命令; -
新建webpack文件夹,Terminal/cmd切换到webpack文件夹下,执行
npm init -y
生成package.json文件-y
: init过程中会有一堆繁琐的问题,比如包名、作者、描述、依赖等一些东西,通过-y
命令可以直接跳过,默认全部“是”。
PS:因为这里我的文件夹名字起的叫webpack,所以默认生成的package.json中的name就是webpack,而webpack是关键字会导致err,只需要打开package.json把name随便改一下即可。 -
npm install webpack --save-dev
如果想要安装特定版本的webpack可以使用npm install webpack@<version> --save-dev
,将version换成想要的版本号即可。-
--save
:save
的意思是把安装信息保存到package.json
中,打开package.json
会发现多了devDependencies
项已经把webpack
添加进去了:"devDependencies": {"webpack": "^2.2.1"}
; -
-dev
:dev
的意思是当前安装插件是放在"devDependencies"
中,表示是开发时所需依赖,正式生产环境所需依赖不需要添加-dev
,是会放在"Dependencies"
中
-
开始(Getting Started)
-
首先建好文件目录
-
webpack.config.js:类似gulpfile.js,配置相关设置,我觉得放在根目录下会合适一些,在配置path时会方便一些,执行webpack命令时会默认搜索webpack.config.js文件,也可以通过指定 –config指定其他文件为配置文件
-
app:存放项目文件模块
-
PS:在模块化开发中,这种文件目录是不推荐的,需要依模块来划分文件目录
-
-
dist:存放webpack处理后的文件
-
-
新建JS/css文件
-
hello.js
-
const msg = "Hello ";
export default class Hello {
constructor() {
this.say = this.say.bind(this);
}
say (word) {
document.write(msg + word);
}
ask () {
document.write("Say Something Please");
setTimeout(() => this.say("webpack"), 1000);
}
}
- index.js
import css from "./index.css";
import Hello from "./hello.js";
new Hello().ask();
- index.css
html,body{
margin:0;
padding:0;
}
body{
background:red;
color: #fff;
font-size: 40px;
}
3.安装部分所需依赖
npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015:因为用到了es6的语法,所以我们需要对es6语法进行转换
npm install style-loader --save-dev css-loader --save-dev: 安装处理css的loader
4.配置webpack.config.js
const path = require('path');
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.[hash].js',
path: path.resolve(__dirname, 'dist')
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
}
};
path: path是Node中的内置对象,也是Node的核心模块之一,这里引入path对象,主要是为了控制生成文件的目录path.resolve(__dirname, 'dist')
这句话中,resolve会将参数中的路径或路径片段的序列解析为一个绝对路径,__dirname表示当前文件模块所在的完整的绝对路径,这样即使项目迁移,地址变更,只要保证相对路径正确即可。
context: 上下文,这里省略了,默认为当前文件模块的绝对路径,下面的entry和output中的路径都是相对于context上下文的相对路径
entry: 入口文件,如果有多个不同的入口文件,可以写成对象的形式
output:配置webpack打包后输出文件的参数
filename: 输出的文件名,'bundle.[hash].js'
中,hash是webpack会生成一个hash值,这里还可以有的写法如:'[name].[hash].js'
指的是 入口文件的名字.hash值.js
hash
也可以改成chunkhash
,如果entry中有多个入口文件,则每一次某个文件的改动都会引起所有输出文件hash值得改变,而chunkhash只会影响有改动模块文件。
path: 生成文件的输出路径
modules: 配置不同文件所需要的loaders以及插件配置,至于什么文件需要什么loaders,在官网和很多地方都可以找到说明。
其实关于output/modules都还有很多参数配置和方法,不过对于入门,在上面这些东西搞明白后,就已经可以跑起来一个简单的流程了。更多的知识,在后期遇到其他的痛点时会去搞明白的。
我的WebPack入门(二)
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/108640.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...