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【成功弹出网页】

vue学习【使用webpack基础配置初步入门】

webpack基础配置

猜你喜欢