在webpack中将所有的脚本、样式都视为模块(Module),通过加载器(Loader)编译,生成.js、.css、.png等静态资源文件。
webpack就是处理模块间的依赖关系的,并将它们进行打包。以下是webpack模块化示意图。
webpack基础配置
1.下载好Node.js和npm------> 如何下载node.js
2. 创建一个目录,打开命令行窗口,进入到该目录下。
3. 初始化npm【npm init】----->生成一个package.json文件
4. 本地安装webpack。【npm install webpack --save-dev】
---->package.json中会多一条属性【"devDependencies": { "webpack": "^4.29.6" }】
5. 安装webpack-dev-server【npm install webpack-dev-server --save-dev】
---->package.json中会多一条属性【webpack-dev-server】
因为我经常分不清命令行的提示到底是成功还是有错误,所以把命令行所有的信息贴在下面,以供参考!
C:\Users\娜>d:
D:\>cd newIdea/webpack
D:\newIdea\webpack>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (webpack) travel
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\newIdea\webpack\package.json:
{
"name": "travel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes) y
D:\newIdea\webpack>npm install webpack --save-dev
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
added 322 packages from 199 contributors and audited 4176 packages in 37.207s
found 0 vulnerabilities
D:\newIdea\webpack>npm install webpack-dev-server --save-dev
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
added 183 packages from 111 contributors and audited 7621 packages in 29.94s
found 0 vulnerabilities
package.json文件的内容如下:【包含webpack和webpack-dev-server即安装成功】
{ "name": "travel", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.29.6", "webpack-dev-server": "^3.3.1" } }
1. 创建webpack.config.js配置文件
var config={
};
module.exports = config; // 支持ES6的编译插件:export default config;
2. 在package.json中的script中添加快速启动webpack-dev-server服务的脚本【执行命令,npm run dev;--config指向webpack-dev-server读取的配置文件路径,也就是可以读取到webpack.config.js文件;--open会在执行命令时自动在browser打开页面,默认地址是127.0.0.1:8080,也可以配置--host 172.172.172.1 --port 8888】
"dev": "webpack-dev-server --open --config webpack.config.js"
3. 创建入口,出口【在文件夹下创建main.js作为入口文件,在webpack.config.js中进行输入输出的配置】
入口的作用是告诉webpack从哪里开始寻找依赖,并且编译;
出口的作用是配置编译后的文件存储位置和文件名。
// webpack.config.js 配置入口和出口
var path = require('path');
var config = {
entry:{
main:'./main'
},
output:{
path:path.join(_dirname,'./dist'),
publicPath:'/dist/',
filename:'main.js'
}
};
module.exports = config;
webpack主要适用于单页面富应用(SPA),一般由html和一堆按需加载的js组成。
执行npm run dev时报错:
The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
internal/modules/cjs/loader.js:584
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
at Function.Module._load (internal/modules/cjs/loader.js:508:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.<anonymous> (D:\newIdea\webpack\node_modules\webpack-dev-server\bin\webpack-dev-server.js:86:1)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server --open --config webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\娜\AppData\Roaming\npm-cache\_logs\2019-04-11T10_09_14_137Z-debug.log
说找不到cli那就安装一下!!
D:\newIdea\webpack>npm install webpack-cli
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
added 20 packages from 20 contributors in 23.75s
This is another problem!
ReferenceError: _dirname is not defined
原因:webpack.config.js中的__dirname的下划线有俩俩俩俩个!!!
Finally,npm run dev---->success【成功弹出网页】