webpackjs合并,webpack代码分割

本文目录一览：

• 1、webpack 合并的时候怎么不处理第三方js，例如jquery
• 2、webpack打包原理
• 3、使用 webpack 打包 js
• 4、怎么理解js所谓的打包
• 5、webpack打包Js文件
• 6、React | 使用webpack构建React项目

webpack 合并的时候怎么不处理第三方js，例如jquery

var webpack = require(‘webpack’);

var ignoreFiles = new webpack.IgnorePlugin(/\.\/jquery-last.js$/);

module.exports = {

entry: ‘./main’,

output: {

path: __dirname,

filename: ‘bundle.js’

},

plugins: [ignoreFiles]

webpack打包原理

webpack打包原理是根据文件间的依赖关系对其进行静态分析，然后将这些模块按指定规则生成静态资源，当 webpack 处理程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack有两种组织模块的依赖方式，同步、异步。异步依赖将作为分割点，形成一个新的块；在优化了依赖树之后，每一个异步区块都将作为一个文件被打包。

webpack有一个智能解析器，几乎可以处理任何第三方库。无论它们的模块形式是CommonJS、AMD还是普通的JS文件；甚至在加载依赖的时候，允许使用动态表require(“、/templates/”+name+”、jade”)。

扩展资料

在使用webpack构建的典型应用程序或站点中，有三种主要的代码类型：

1、团队编写的源码。

2、源码会依赖的任何第三方的library或”vendor”代码。

3、webpack的runtime和manifest，管理所有模块的交互。

runtime 包含：在模块交互时，连接模块所需的加载和解析逻辑；包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。

使用 webpack 打包 js

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

app.js: 入口文件;

bundle.js: 打包好的文件。

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

怎么理解js所谓的打包

所谓打包就是将多个js文件合并，压缩，为什么需要打包呢，因为js合并之后可以减少前端js引用js的数量和体积，数量少了js加载就相对快一些。为什么会说体积也减小了呢，因为现在流行的打包工具例如webpack在打包的过程中不只是简单的把多个js文件合并成一个文件这么简单，它还会多js进行压缩，例如去掉无效的空格，替换较长的变量名函数名等，最后让你的js文件变得更小。

webpack打包Js文件

a .

注意点:index.js就是需要打包的文件打包之后的文件会放到dist目录中, 名称叫做main.js

b .

这句指令的含义是: 利用webpack将index.js和它依赖的模块打包到一个文件中

其实在webpack指令中除了可以通过命令行的方式告诉webpack需要打包哪个文件以外,

还可以通过配置文件的方式告诉webpack需要打包哪个文件

这句指令的含义是将webpack将index.js和他依赖的模块打包到一个文件中

其实webpack打包指令除了可以通知要打包哪些文件，还可以通过配置

2.2webpack常见配置

刚才是输入npx webpack index.js 那么现在就可以输入npx webpack了

如果想要使用其他指令，可以直接修改的 package.json 的scirpts

以后再打包的时候，就可以直接使用npm run test了；

当然，还可以看下devtool的取值，他生成的sourcemap映射表，对打包后的包的大小和打包速度有很大影响

React | 使用webpack构建React项目

配置 React 项目，需要完成的工作：

1、编译 jsx,es6,scss 等资源

2、自动引入静态资源到 html 页面

3、实时编译和刷新浏览器

4、按指定模块化规范自动包装模块

5、自动给 css 添加浏览器内核前缀

6、按需打包合并 js、css

根据 webpack 文档编写最基本的 webpack 配置，直接使用 node api 的方式

/* webpack.config.js */

var webpack= require( ‘webpack’ );

// 辅助函数  var utils= require( ‘./utils’ );

var fullPath=utils.fullPath;

var pickFiles=utils.pickFiles;

// 项目根路径  var ROOT_PATH=fullPath( ‘../’ );

// 项目源码路径  var SRC_PATH=ROOT_PATH+ ‘/src’ ;

// 产出路径  var DIST_PATH=ROOT_PATH+ ‘/dist’ ;

// 是否是开发环境  var __DEV__= process.env. NODE_ENV !== ‘production’ ;

// conf

var alias=pickFiles({

id :/(conf\/[^\/]+).js$/,

pattern :SRC_PATH+ ‘/conf/*.js’

});

// components

alias= Object.assign(alias,pickFiles({

id :/(components\/[^\/]+)/,

pattern :SRC_PATH+ ‘/components/*/index.js’

}));

// reducers

alias= Object.assign(alias,pickFiles({

id :/(reducers\/[^\/]+).js/,

pattern :SRC_PATH+ ‘/js/reducers/*’

}));

// actions

alias= Object.assign(alias,pickFiles({

id :/(actions\/[^\/]+).js/,

pattern :SRC_PATH+ ‘/js/actions/*’

}));

var config= {

context :SRC_PATH,

entry : {

app : [ ‘./pages/app.js’ ]

},

output : {

path :DIST_PATH,

filename : ‘js/bundle.js’

},

module : {},

resolve : {

alias :alias

},

plugins : [

new webpack.DefinePlugin({

//

“process.env.NODE_ENV” : JSON .stringify(process.env. NODE_ENV || ‘development’ )

})

]

};

module.

exports =config;

/* webpack.dev.js */

var webpack= require( ‘webpack’ );

var WebpackDevServer= require( ‘webpack-dev-server’ );

var config= require( ‘./webpack.config’ );

var utils= require( ‘./utils’ );

var PORT=8080;

var HOST=utils.getIP();

var args= process.argv;

var hot=args.indexOf( ‘–hot’ ) -1;

var deploy=args.indexOf( ‘–deploy’ ) -1;

// 本地环境静态资源路径  var localPublicPath= ‘http://’ +HOST+ ‘:’ +PORT+ ‘/’ ;

config.output. publicPath =localPublicPath;

config.entry.app.unshift( ‘webpack-dev-server/client?’ +localPublicPath);

new WebpackDevServer(webpack(config), {

hot :hot,

inline : true ,

compress : true ,

stats : {

chunks : false ,

children : false ,

colors : true

},

// Set this as true if you want to access dev server from arbitrary url.

// This is handy if you are using a html5 router.

historyApiFallback : true ,

}).listen(

PORT,HOST, function () {

console .log(localPublicPath);

});

编译 jsx、es6、scss 等资源：

● 使用 bael 和 babel-loader 编译 jsx、es6

● 安装插件: babel-preset-es2015 用于解析 es6

● 安装插件：babel-preset-react 用于解析 jsx

// 首先需要安装 babel

$ npm i babel-core

// 安装插件

$ npm i babel-preset-es2015babel-preset-react

// 安装 loader

$ npm i babel-loader

在项目根目录创建 .babelrc 文件:

{

“presets” : [ “es2015” , “react” ]

}

在 webpack.config.js 里添加：

// 使用缓存 var CACHE_PATH = ROOT_PATH + ‘/cache’ ;

// loaders

config.module. loaders = [];

// 使用 babel 编译 jsx 、 es6

config.module. loaders .push({

test :/\.js$/,

exclude :/node_modules/,

include : SRC_PATH,

// 这里使用  loaders ，因为后面还需要添加  loader

loaders : [ ‘babel?cacheDirectory=’ + CACHE_PATH ]

});

接下来使用 sass-loader 编译 sass:

$ npm i sass-loader node-sasscss-loader style-loader

●css-loader 用于将 css 当做模块一样来 import

●style-loader 用于自动将 css 添加到页面

在 webpack.config.js 里添加：

// 编译  sass

config.module. loaders .push({

test :/\.(scss|css)$/,

loaders : [ ‘style’ , ‘css’ , ‘sass’ ]

});

自动引入静态资源到相应 html 页面

● 使用 html-webpack-plugin

$ npm i html-webpack-plugin

在 webpack.config.js 里添加：

// html  页面  var HtmlwebpackPlugin= require( ‘html-webpack-plugin’ );

config.

plugins .push(

new HtmlwebpackPlugin({

filename : ‘index.html’ ,

chunks : [ ‘app’ ],

template : SRC_PATH + ‘/pages/app.html’

})

);

打包合并 js、css

webpack 默认将所有模块都打包成一个 bundle，并提供了 Code Splitting 功能便于我们按需拆分。在这个例子里我们把框架和库都拆分出来：

在 webpack.config.js 添加：

config.entry. lib = [

‘react’ , ‘react-dom’ , ‘react-router’ ,

‘redux’ , ‘react-redux’ , ‘redux-thunk’

]

config.output. filename = ‘js/[name].js’ ;

config.

plugins .push(

new webpack.optimize.CommonsChunkPlugin( ‘lib’ , ‘js/lib.js’ )

);

// 别忘了将  lib  添加到  html  页面

// chunks: [‘app’, ‘lib’]