webpack4.x开发环境配置

最新推荐文章于 2022-09-13 21:23:41 发布

Jqlender

最新推荐文章于 2022-09-13 21:23:41 发布

阅读量610

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/qq_34035425/article/details/81709031

版权

webpack 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、全局安装webpack

//全局安装
npm install webpack -g
//安装到你的项目目录
npm install --save-dev webpack

–save-dev 是你开发时候依赖的东西，–save 是你发布之后还依赖的东西

二、安装webpack-cli

如果你使用 webpack v4+ 版本，你还需要安装 webpack-cli或者webpack-command，否则webpack命令运行不了。

//卸载本地安装的webpack-cli
npm uninstall webpack-cli
//全局安装webpack-cli
npm install -g webpack-cli
//在项目中安装webpack-cli
npm install webpack-cli -D

//全局安装webpack-command
npm install -g webpack-command
//在项目中安装webpack-command
npm install webpack-command -D

三、创建package.json，用于保存关于项目的信息

定位到自己新建的文件夹webpack1，输入命令进行项目初始化

npm init

输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。

四、项目结构

创建如下项目结构
这里写图片描述

<!--index.html-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>

// greeter.js
module.exports = function() {
    var greet = document.createElement('div');
    greet.textContent = "Hi there and greetings!";
    return greet;
};

//main.js
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

五、使用webpack

1. 通过命令行打包

webpack非全局安装的情况下，js打包成一个文件dist/bundel.js
注意window下不能用 node_modules/.bin/webpack src/main.js dist/bundel.js

node_modules\.bin\webpack src\main.js -o dist\bundle.js
//或者
node_modules\.bin\webpack src\main.js --output dist\bundle.js

使用命令行打包，可以看出webpack同时编译了main.js 和greeter,js,现在打开index.html,可以看到Hi there and greetings!

2.通过配置文件来使用Webpack

新建一个名为webpack.config.js的文件

module.exports={
    entry:__dirname+'/src/main.js',//唯一入口文件
    output:{
        path:__dirname+'/dist',//打包后的文件存放的地方
        filename:'bundle.js'   //打包后输出文件的文件名
    }
}

“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
有了这个配置之后，再打包文件，只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了，这条命令会自动引用webpack.config.js文件中的配置选项

3.npm配置命令 npm start, npm run {script name}

在package.json中对scripts对象进行相关设置即可

 "scripts": {
    "start": "webpack",
  },

注：package.json中的script会安装一定顺序寻找命令对应位置，本地的node_modules/.bin路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack，不需要写前面指明详细的路径。

npm start是个特殊命令，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令。
如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build。

4. webpack –mode 默认打包

运行

//开发模式
webpack --mode development
//默认生产模式
webpack --mode production

在Webpack4.0中，通过mode指定环境。用于配置运行环境，mode的值可以为development，表示的是开发模式，或者是production，表示的是生产模式。webpack 会将 production 作为 mode 的默认值去设置
webpack –mode development或者webpack –mode production，这样便会默认进行打包。

可以在package.json中scripts中加入:

"scripts": {
    "dev":"webpack --mode development",
    "build":"webpack --mode production"
    }

根目录运行

npm run dev
npm run build

webpack-dev-server的3.1.0版本只支持webpack4

Jqlender

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack4.x开发环境配置

一、全局安装webpack//全局安装npm install webpack -g//安装到你的项目目录npm install --save-dev webpack二、安装webpack-cli如果你使用 webpack v4+ 版本，你还需要安装 webpack-cli或者webpack-command，否则webpack命令运行不了。//卸载本地安装的webpac...
复制链接

扫一扫