包含webpackapp.js的词条

本文目录一览：

• 1、使用 webpack 打包 js
• 2、关于webpack替换文件hash的问题，有人有过这方面经验吗
• 3、使用webpack4从0开始打包一个antd项目

使用 webpack 打包 js

通过 命令行工具打包: webpack app.js bundle.js; 打包完成后会在同目录下生成bundle.js.

app.js: 入口文件;

bundle.js: 打包好的文件。

通过amd规范定义的, 打包后会生成一个bundle.js 和 一个 1.bundle.js， 两个bundle.js 文件

关于webpack替换文件hash的问题，有人有过这方面经验吗

首次使用Webpack, 用CLI, 即Command Line Interface

→ 确认是否安装了NodeJS

npm -v

→ 安装 Webpack

npm install webpack -g

→ 创建一个简单的网站

…..webpacktest/

……….app.js

……….index.html

→ 导航到webpacktest所在文件夹

→ 对app.js文件使用webpack

webpack ./app.js bundle.js

→ 我们看到在webpacktest目录下多了一个bundle.js文件

→ 现在，可以在index.html中引用bundle.js文件，而不是app.js文件

■ 在项目中添加配置文件

→ 在项目根目录下创建名称为webpack.config.js文件

当设置好webpack.config.js文件后，每次我们导航到项目，只要使用webpack这一个命令就可以使用各项功能了。

module.exports = {

entry: “./app.js”,

output: {

filename: “bundle.js”

}

}

→ 命令行来到需要Webpack的网站下

→ 直接输入webpack命令

webpack

■ 启用Webpack观察者模式

当webpack.config.js的配置发生变化，如果每次都要手动输入webpack命令来生成js文件的话，显得相对麻烦一些。Webpack为我们提供了观察者模式，启用后，任何的webpack.config.js中的变化将接受观察，自动生成最终的js文件。

→ 命令行来到需要Webpack的网站下

→ 启用观察者模式

webpack –watch

→ 在webpack.config.js中添加watch字段，并设置成true

module.exports = {

entry: “./app.js”,

output: {

filename: “bundle.js”

},

watch: true

}

→ 这样，每次修改保存webpack.config.js中引用文件，bundle.js的文件会自动更新。

■ 安装启用Webpack DevServer

→ 导航到目标网站目录

→ 输入npm命令安装Webpack DevServer

npm install webpack-dev-server -g

→ 输入webpack-dev-server命令

webpack-dev-server

→ 看到大致如下内容

webpack result is served from /

cotent is served from D:\…

Hash:…

Version:webpack1.12.4

Time:94ms

…

webpack: bundle is now VALID.

→ 在浏览器中输入：

同时显示app.js文件中console.log和document.write的内容。

→ 修改webpack.config.js中依赖的文件并保存，浏览器中的内容就会自动更新

→ 如果不想显示console.log内容呢？

→ 在浏览器中输入：

→ 此时，再修改webpack.config.js中依赖的文件并保存，浏览器的内容却不会更新？

→ 再次回到命令行，加入一个inline的flag

webpack-dev-server –inline

→ 此时，如果修改webpack.config.js中依赖的文件并保存，浏览器中的内容就会自动更新了☺

■ Bundling多个文件

→ 在项目下再添加一个login.js文件

console.log(‘login loaded’);

→ app.js中引用login.js文件

require(‘./login’);

document.write(“Welcome to Big Hair Concerts!!Baby”);

console.log(‘App loaded’);

→ 在浏览器中输入：

可以看到变化。

→ 在项目下再添加一个utils.js文件

console.log(‘logging from the utils.js file…’);

→ 来到webpack.config.js下配置如下：

module.exports = {

entry: [“./utils”,”./app.js”],

output: {

filename: “bundle.js”

},

watch: true

}

→ 命令行导航到当前项目下

→ 重新启用Webpack DevServer

webpack-dev-server

→ 在中体现了相应的变化

使用webpack4从0开始打包一个antd项目

$ npm install -g cnpm –registry= // 安装cnpm

$ mkdir project // 根目录下创建一个名为project的文件夹

$ cd project cnpm init // 进入project文件夹 并初始化该项目 终端会提示一些配置，一路键入enter最后yes即可。 初始化完成会生成一个pakage.json文件

$ cnpm i –D webpack webpack-dev-server webpack-cli // webpack4.x 必须安装webpack-cli。

根目录下新建文件src/index.js

$ npm run build // 此时我们可以执行npm run build 代替npx webpack。 构建成功后根目录下自动生成 dist/main.js。

为什么我们没有对webpack进行任何配置，却可以成功打包？那是因为在没有配置入口文件的情况下， webpack 4.x会自动查找src/index.js作为入口文件进行打包。

这里我们需要了解webpack4个核心概念——入口(entry)、输出(output)、loader、插件(plugins)。

根目录下创建webpack.config.js

$ cnpm run build

我们可以看到根目录下打包出了dist/main.js。

这时候如果我们将webpack.config.js中入口配置改为

$ cnpm run build

重新构建我们发下dist目录下多出了一个app.js文件，上一次打包的main.js还在，如果我们希望每次打包之前先清除掉上一次的打包文件，则需要用到clean-webpack-plugin插件。

$ cnpm i -D clean-webpack-plugin // vesion: 6.13.4 (6.x版本与低版本引入方式不一样)

安装后我们在webpack.config.js里进行配置 。

首先引入clean-webpack-plugin

再在plugins里实例化

$ cnpm run build

重新构建，我们可以看到上一次打包出的dist/app.js已经删掉了。

首先我们在dist目录下手动增加一个index.html文件，引入main.js

在chrome中打开该html文件，我们可以看到控制台中成功打印出hello world

那么问题来了，难道我们每次打包需要手动在dist目录下添加一个html文件吗？ 显然不可能，这时候我们需要用到html-webpack-plugin插件自动添加html文件。

我们先将dist/index.html文件移动到src下，去掉script标签。

$ cnpm i -D html-webpack-plugin

安装好后一样先引入插件 具体插件配置参考官网

$ cnpm run build

此时我们看到dist目录下自动生成了一个index.html文件，里面包含了div id=”root”/div,

这是因为我们在模板文件里写过。之前我们已经安装过了webpack-dev-server，并在package.json脚本里配置了”dev”: “webpack-dev-server” 此时我们可以运行

$ cnpm run dev

终端提示自动运行在localhost:8080, chrome上打开8080端口，查看控制台，我们可以看到打印出了hello world。

$cnpm run dev

这时我们可以看到该项目已经运行在我们制定的端口8989上了。

$ cnpm i -D style-loader css-loader less-loader file-loader url-loader

我们在src目录下新建一个images文件夹，然后拖入一张图片，这里图片名用了smokinggirl.jpeg。 再在src目录下新建一个index.less文件。

然后修改src/index.js src/index.less

src/index.less

webpack.config.js中module部分增加配置

$ cnpm run dev

可以看到有一个宽200px的图片显示出来。

这样打包出来的css 样式会作用到全局，如果页面多可能会相互影响，这时候我们可以启用css模块，配置稍作修改

src/index.js

$cnpm run dev

这时候我们可以看到图片成功显示出来，但仔细观察图片类名，是一串自动生成的字符，与我们自己定义的类名没有半点关系，那么如何显示出我们定义的类名呢？

$ cnpm run dev 这时候可以看到打包出的类名符合我们定义的形式。

但仔细观察，我们发现body还有默认样式，我们可以在index.html引入一个公共样式文件，去除默认样式。

src目录下 新建common/reset-style.css, 写个简单的去默认样式的文件

然后在html模板文件 src/index.html中引入，

这时候我们运行，发现报错找不到该文件。这是因为我们在index.html里引入该文件，但webpack没有打包编译。这时候我们需要用到插件copy-webpack-plugin

$ cnpm i -D copy-webpack-plugin

重新运行，我们可以看到原先的默认样式body的边距已经没有了。

$ npm i -S react react-dom

安装完react、react-dom 还不够，我们需要babel做翻译，才能让浏览器读懂。

$ cnpm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime @babel/runtime-corejs2

安装好后根目录新建.babelrc文件。

webpack.config.js 的module里增加babel-loader的配置

配置好我们来写react文件

新建src/page/content/index.js, 将src下的index.less拖入content目录下。

接下来改造src/index.js 入口文件

然后运行 我们可以看到页面正常显示。到这里我们已经可以正确打包并运行react项目了。

$ cnpm i -S antd

根据antd官网描述，我们还需要在入口文件引入一个样式文件。

src/index.js

到这里我们可以发现一个问题，我们对css文件打包的时候启用了模块，很明显这样直接引用是不行的。 antd的样式是从node_modules里引用的，那么我们的思路就是打包css文件时去除掉node_modules里面的文件再启用模块，node_modules里面的文件不启用模块。

接下来我们对webpack.config.json进行改造。

只有这样还不够，我们需要用到babel-plugin-import插件实现按需加载，antd样式应用到全局需要用到此插件。

$cnpm i -D babel-plugin-import

.babelrc

ok现在我们来改造一下src/page/content/index.js文件，引入一个antd组件。

现在我们来运行，发现报了个错

提示我们需要安装一个@babel/plugin-proposal-class-properties插件。

$ cnpm i -D @babel/plugin-proposal-class-properties

然后我们需要在babel的配置文件中加入它

现在我们重新运行 $ cnpm run dev 一个简单的包含antd组件的页面就完成了。

。