webpack插件生成js文件（webpack压缩代码插件）

本文目录一览：

• 1、使用 webpack 打包 js
• 2、WebPack打包React项目, 减小打包后生成的js文件.
• 3、webpack 额外输出JS文件？
• 4、webpack打包原理
• 5、webpack基本使用

使用 webpack 打包 js

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

app.js: 入口文件;

bundle.js: 打包好的文件。

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

WebPack打包React项目, 减小打包后生成的js文件.

Warning: It looks like you’re using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See for more details.

“`

这里分别把 使用的 react , react-dom , jquery , react-router , 第三方库提了出来单独生成文件vendor.js

首先安装依赖: extract-text-webpack-plugin ,

之后在webpack中进行配置

**注意: ** 例子中配置中 {publicPath: ‘./’} 不是必填项, 我这里是为了解决背景图片打包或路径不正确的问题, 具体请查看

webpack 额外输出JS文件？

webpack配置如下：

…

const ExtractTextPlugin = require(‘extract-text-webpack-plugin’)

module.exports = {

…

output: {

path: path.join(__dirname, ‘./dist’),

filename: ‘js/[name].js’,

publicPath: ‘/dist/’

},

module: {

loaders: [

…

{

test: /\.css$/,

loader: ExtractTextPlugin.extract({

fallbackLoader: ‘style’,

loader: ‘css’,

publicPath: ‘../’

})

},

]

},

plugins: [

…

new ExtractTextPlugin({

filename: ‘css/[name].css’,

disable: false,

allChunks: false

})

]

}

webpack打包原理

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

webpack.config.js里配置

webpack.config.js里配置

webpack loader 将所有类型的文件，转换为应用程序的依赖图可以直接引用的模块

通过require()将想要使用的插件添加到plugins数组中,多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

npm init -y

安装webpack

npm i webpack_dome webpack-cli -D

在根目录下新建src文件夹,在src里新建index.js文件

index.js文件

创建并配置webpack.config.js文件

webpack.config.js文件

配置 package.json 文件，在scripts中添加’build’使得运行 npm run build 可以直接执行 webpack 命令,在根目录内会生成dist文件夹,里面是对应生成的文件,

安装 npm install –save-dev express webpack-dev-middleware ,添加’start’使得运行 npm run start 可以直接执行 webpack-dev-server 命令,

package.json 文件

再次打包时需要删除旧文件

执行 npm install clean-webpack-plugin –save-dev 命令，安装依赖。

修改webpack.config.js文件配置

新建index.html文件,并手动引入打包后的js文件

执行 npm i html-webpack-plugin –save-dev 命令，安装依赖。

新建index.ejs文件

修改webpack.config.js文件配置

重新运行 npm run build，生成新的 dist 包，包内会生成一个新的 index.html 文件，并自动引入了 index.min.js 文件。

执行 npm i open-browser-webpack-plugin webpack-dev-server –save-dev 命令，安装依赖。

修改 webpack.config.js 配置

修改webpack.config.js文件配置

webpack基本使用

step1: 创建一个项目录

注意：项目名一般 不要带中文

step2: 创建 package.json

或者：

step4: 处理第三方文件

html文件中需要引入多个js文件或者第三方模块(例如：jquery.js)，只引入项目js入口文件( main.js ),其他js文件均在入口文件中导入。导致可能JS文件中使用了浏览器不识别的高级语法:

总结：webpack可以做两件事情况：

step5: 配置入口文件和出口文件

每次修改js文件，手动输入命令： webpack 入口文件路径 -o 出口文件路径 重新打包， 每次都要输入入口文件和出口文件，麻烦。可以在项目目录下建立配置文件 webpack.config.js ,指定入口文件和出口文件:

重新打包：

step6: 实现自动打包编译

每次修改js文件，都要手动重新打包，还是麻烦？使用 webpack-dev-server 这个工具，来实现自动打包编译的功能。

webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中必须安装 webpack

在 package.json 文件中配置命令：

在终端中执行命令：

注：在终端执行 npm run dev ，就等于执行 webpack-dev-server 命令。这将在node中开启一个服务器，并且立即打包。每次修改文件，ctrl + s 保存文件,webpack-dev-server工具自动监听文件改变，并且自动打包。

改变文件引用路径：

执行上述命令后终端会有类似信息输出：

【 Project is running at 】——webpack-dev-server工具将项目托管到localhost:8080/端口上

【webpack output is served from /】——打包好的文件通过localhost:8080/bundle.js访问

【Content not from webpack is served from C:\Users\yfb\Desktop\前端学习案例4.27\wabpack\Demo_1\src】——不是通过webpack打包的文件，则是以src为根目录访问。

该项目根目录下并不存在bundel.js文件，我们可以认为webpack-dev-server把打包好的文件，以一种虚拟的形式托管到了咱们项目的根目录中，虽然我们看不到它，但是可以认为和 dist、src、node_modules平级，有一个看不见的文件，叫做 bundle.js。其实是为了频繁打包，提高效率，直接把打包的文件放在内存中。

因为项目托管到新服务器，现在应该访问的是 该服务器 下的项目，文件引用路径也要改变:

step7: 自动打开浏览器进行访问、配置端口号、指定托管的根目录、热重载（只是修改补丁，不重新生成整个bundle.js文件）

在 package.json 中配置命令，并重启服务器：

step8: 使用 html-webpack-plugin 插件

使用 –contentBase 指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性。

安装 html-webpack-plugin 插件：

在 webpack.config.js 配置文件中配置插件：

html-webpack-plugin 插件的两个作用：

step9: 处理样式文件

html文件中需要引入css、less、sass样式文件。默认情况下，webpack处理不了这些样式文件。

处理css文件：

处理less样式文件