您的位置:

webpack.jspath的简单介绍

webpack.jspath的简单介绍

更新:

本文目录一览:

Webpack 配置

通过 http://[devServer.host]:[devServer.port]/webpack-dev-server 查看 devServer 提供的所有资源列表。

通过 http://[devServer.host]:[devServer.port]/[output.publicPath]/资源名称 来访问对应的资源。

如果提供了 devMiddleware.publicPath ,则通过 http://[devServer.host]:[devServer.port]/[devMiddleware.publicPath]/资源名称 来访问对应的资源,但是通过插件生成的 html 和 css 文件当中所有资源引用的路径仍然使用的是 http://[devServer.host]:[devServer.port]/[output.publicPath]/资源名称 。因此需要保证 output.publicPath 与 devMiddleware.publicPath 一致。

static 设置的是静态资源目录的位置,不是打包生成的文件的存放位置,devServer 打包生成的文件存放在内存中,不存放到硬盘目录。

static.publicPath 设置的是访问静态资源的路径,不是访问打包生成的资源的路径,打包生成的资源路径通过 output.publicPath 访问,静态资源路径访问的是直接存放在静态目录中的静态资源。

配置文件

initial chunk 的文件名

占位符:

non-initial chunk 的文件名,占位符参考 output.filename

设置为 true ,每次打包之前清理 output.path 目录中的所有内容,可以替代 CleanWebpackPlugin 插件。

定义资源存放的位置,例如根据以上的配置文件打包之后生成如下文件:

将 1 2 3 生成的资源都存放到 output.path 目录, dist/app.bundle.js dist/css/app.min.css dist/images/1.jpg

部署的时候,将该目录下的内容复制到服务器对应的目录即可。

定义资源访问的路径

资源访问路径 = output.publicPath + 资源名称

output.publicPath 可以是绝对路径、相对于服务的路径、相对于页面的路径。 不管是哪种路径,都要以 / 结尾

HtmlWebpackPlugin 生成的 index.html 文件:

MiniCssExtractPlugin 生成的 css 文件:

HtmlWebpackPlugin 生成的 index.html 文件:

MiniCssExtractPlugin 生成的 css 文件:

HtmlWebpackPlugin 生成的 index.html 文件:

MiniCssExtractPlugin 生成的 css 文件:

不管通过哪种路径设置 output.publicPath ,都只是影响 HtmlWebpackPlugin 和 MiniCssExtractPlugin 生成的文件中引用其他资源的路径。具体能不能根据资源路径访问到相应的资源,还得正确的部署 output.path 目录到服务器。

在开发模式下,devServer 自动开启一个开发服务器,并且将所有打包生成的资源存储到内存当中,然后通过 http://[devServer.host]:[devServer.port]/[output.publicPath]/资源名称 来访问对应的资源。 这时候 output.publicPath 应该设置为相对服务的路径,例如 / 。

如果你的页面希望在其他不同路径中找到资源文件,则可以通过 devServer 配置中的 devMiddleware.publicPath 选项进行修改。

在生产模式下,推荐将 output.publicPath 设置为绝对路径,然后将 output.path 目录部署与绝对路径对应的服务器中。

配置文件

module.rules 是匹配规则数组,数组中的每一项为一条匹配规则,以下称为 rule。每条 rule 包括匹配条件和匹配结果。

对于依赖图中的每个模块路径,都按照 module.rules 中的 rule 依次进行匹配。如果模块路径满足某个 rule 的匹配条件,则对该模块应用该 rule 的 匹配结果中指定的 loader 进行预处理。? 如果模块路径满足多个 rule 的匹配条件 ?

匹配条件包括 test include exclude 选项,每个选项为一个匹配条件,选项的值可以是:

如果某个 rule 同时有多个匹配条件选项,则模块路径必须同时满足所有的匹配条件,才会对模块应用匹配结果。test 和 include 具有相同的作用,都是必须匹配选项。exclude 是必不匹配选项(优先于 test 和 include)。

最佳实践:

以上配置文件的第二条 rule,如果某个模块不在 ./src/node_modules/ 和 ./src/libs/ 目录下,并且在 ./src/ 目录下,并且模块名以 .js 结尾,则满足该条 rule 的匹配条件。

package.json

webpack.common.js

webpack.prod.js

webpack.dev.js

webpack安装失败,请问这样要怎么解决

可以看看webpack的官网的, 比如在installation这个章节, 里面就介绍了怎么安装webpack.

首先你需要安装一个全局的webpack

npm install webpack -g

这样你才可以正确的使用webpack这个命令

然后, 你还可以在当前项目里面也安装一个webpack, 这也是官方推荐的做法

npm install webpack --save-dev

这样就可以在你的webpack.config.js里面方便的引用webpack

// webpack.config.js

var path = require('path');

var webpack = require('webpack');

然后在使用一些plugin的时候就比较方便了

new webpack.optimize.CommonsChunkPlugin('common.js')

或者你可以看看webpack的官网的, 比如在installation这个章节,

里面就介绍了怎么安装webpack. 首先你需要安装一个全局的webpack npm install webpack -g

这样你才可以正确的使用webpack这个命令 然后, 你还可以在当前项目里面也安装一个webpack, 这也...

webpack多页面怎么使用

webpack是一款模块加载器兼打包工具,能把js,css,页面,图片,视频等各种资源,进行模块化处理。而现在网上流传很多单页面的webpack模型,那多页面呢?比较少,现在我提供一个多页面的前端模型。希望大家适合使用。

功能介绍

这模型是多页面模块打包,模型是用html,你们可以换成自己的jsp,php按你自己的需要来。

通过运行服务,把文件直接打包到dist目录下,dist是编译后的文件,服务直接读取dist目录。而开发文件是放在在src目录下。启动运行服务,会监听src文件的变化进行热更操作直接打包到dist目录。

打包功能包括:sass,雪碧图制作,视频文件(mp4,flv,swf),js和css文件压缩,图片(png,jpg,gif),文件(woff,woff2,ttf,eot,svg)。

安装与使用

安装依赖包

npm install –save-dev #部分包需要全局安装 看到失败的包就全局安装一下就行

运行

webpack-dev-server –hot –inlinewebpack -w

运行成功查看

127.0.0.1:9090/

打包

webpack

压缩文件打包

webpack -p

文件目录

- website

- src #代码开发目录

- css #css目录,按照页面(模块)、通用、第三方三个级别进行组织

+ page

+ common

+ lib

+ img #图片资源

+ sprite #雪碧图

favicon.ico #图标

+ video #视频文件

- js #JS脚本,按照page、components进行组织

+ page

+ components

+ view #HTML模板

index.html #首页

- dist #webpack编译打包输出目录,无需建立目录可由webpack根据配置自动生成

+ css

+ js

+ img

+ video

+ view

index.html

+ node_modules #所使用的nodejs模块

package.json #项目配置

webpack.config.js #webpack配置

README.md #项目说明

packange

packange.json

{

"name": "webpack-model",

"version": "1.0.0",

"description": "page demo",

"scripts": {

},

"author": "Jarun",

"license": "ISC",

"devDependencies": {

"css-loader": "^0.23.1",

"extract-text-webpack-plugin": "^1.0.1",

"file-loader": "^0.8.5",

"html-loader": "^0.4.3",

"html-webpack-plugin": "^2.9.0",

"jquery": "^1.12.0",

"less": "^2.6.0",

"less-loader": "^2.2.2",

"plugins": "^0.4.2",

"replace": "^0.3.0",

"style-loader": "^0.13.0",

"url-loader": "^0.5.7",

"vue-hot-reload-api": "^2.0.11",

"webpack": "^1.12.13",

"webpack-dev-middleware": "^1.10.1",

"webpack-dev-server": "^1.16.3",

"webpack-spritesmith": "^0.3.3"

}

}

webpack.config

webpack.config.js

var path = require('path');

var webpack = require('webpack');

var glob = require('glob');

var WebpackDevServer = require('webpack-dev-server')

var SpritesmithPlugin = require('webpack-spritesmith');

/*

extract-text-webpack-plugin插件,

有了它就可以将你的样式提取到单独的css文件里,

妈妈再也不用担心样式会被打包到js文件里了。

*/

var ExtractTextPlugin = require('extract-text-webpack-plugin');

/*

html-webpack-plugin插件,重中之重,webpack中生成HTML的插件,

具体可以去这里查看

*/

var HtmlWebpackPlugin = require('html-webpack-plugin');

var entries = getEntry('src/js/page/**/*.js', 'src/js/page/');

var commonsChunk = getCommonsChunk('src/js/page/**/*.js', 'src/js/page/');

var config = {

entry: entries,

output: {

path: path.join(__dirname, 'dist'), //输出目录的配置,模板、样式、脚本、图片等资源的路径配置都相对于它

publicPath: './dist/', //模板、样式、脚本、图片等资源对应的server上的路径

filename: 'js/[name].js', //每个页面对应的主js的生成配置

chunkFilename: 'js/[id].chunk.js' //chunk生成的配置

},

module: {

loaders: [ //加载器,关于各个加载器的参数配置,可自行搜索之。

{

test: /\.css$/,

//配置css的抽取器、加载器。'-loader'可以省去

loader: ExtractTextPlugin.extract('style-loader', 'css-loader')

}, {

test: /\.less$/,

//配置less的抽取器、加载器。中间!有必要解释一下,

//根据从右到左的顺序依次调用less、css加载器,前一个的输出是后一个的输入

//你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。

loader: ExtractTextPlugin.extract('css!less')

}, {

//html模板加载器,可以处理引用的静态资源,默认配置参数attrs=img:src,处理图片的src引用的资源

//比如你配置,attrs=img:src img:data-src就可以一并处理data-src引用的资源了,就像下面这样

test: /\.html$/,

loader: "html?attrs=img:src img:data-src"

}, {

//文件加载器,处理文件静态资源

test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,

loader: 'file-loader?name=fonts/[name].[ext]'

}, {

//视频加载

test: /\.(mp4|flv|swf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,

loader: 'file-loader?name=video/[name].[ext]'

}, {

//图片加载器,雷同file-loader,更适合图片,可以将较小的图片转成base64,减少http请求

//如下配置,将小于50000byte的图片转成base64码

test: /\.(png|jpg|gif)$/,

loader: 'url-loader?limit=5000name=img/[hash].[ext]'

}

]

},

//使用webpack-dev-server,提高开发效率

devServer: {

historyApiFallback:true,

contentBase: './dist',

host: '127.0.0.1',

progress:true,//报错无法识别,删除后也能正常刷新

port: 9090,

inline: true,

hot: true,

},

plugins: [

new webpack.ProvidePlugin({ //加载jq

$: 'jquery',

jQuery:"jquery",

"window.jQuery":"jquery"

}),

new webpack.optimize.CommonsChunkPlugin({

name: 'common', // 将公共模块提取,生成名为`vendors`的chunk

chunks: commonsChunk, //提取哪些模块共有的部分

minChunks: commonsChunk.length // 提取至少3个模块共有的部分

}),

new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径,相对于output配置中的publickPath

new SpritesmithPlugin({

src: {

cwd: path.resolve(__dirname, 'src/img/sprite/'),

glob: '*.png'

},

target: {

image: path.resolve(__dirname, 'src/img/sprite.png'),

css: path.resolve(__dirname, 'src/css/common/sprite.sass')

},

apiOptions: {

cssImageRef: "~sprite.png"

}

}),

//HtmlWebpackPlugin,模板生成相关的配置,每个对于一个页面的配置,有几个写几个

new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML

favicon: './src/img/favicon.ico', //favicon路径,通过webpack引入同时可以生成hash值

filename: './index.html', //生成的html存放路径,相对于path

template: './src/index.html', //html模板路径

inject: 'body', //js插入的位置,true/'head'/'body'/false

hash: true, //为静态资源生成hash值

chunks: ['common', 'index'],//需要引入的chunk,不配置就会引入所有页面的资源

minify: { //压缩HTML文件

removeComments: true, //移除HTML中的注释

collapseWhitespace: false //删除空白符与换行符

}

}),

new webpack.HotModuleReplacementPlugin() //热加载

]

};

var viesObj = getView('src/view/**/*.html', 'src/view/')

var pages = Object.keys(viesObj);

pages.forEach(function(pathname) {

var htmlName = viesObj[pathname]

var conf = {

filename: './view/' + htmlName + '.html', //生成的html存放路径,相对于path

template: './src/view/' + htmlName + '.html', //html模板路径

inject: 'body', //js插入的位置,true/'head'/'body'/false

hash: true, //为静态资源生成hash值

favicon: './src/img/favicon.ico', //favicon路径,通过webpack引入同时可以生成hash值

chunks: ['common',htmlName],//需要引入的chunk,不配置就会引入所有页面的资源

minify: { //压缩HTML文件

removeComments: true, //移除HTML中的注释

collapseWhitespace: false //删除空白符与换行符

}

};

config.plugins.push(new HtmlWebpackPlugin(conf));

});

module.exports = config;

function getView(globPath, pathDir) {

var files = glob.sync(globPath);

var entries = {},

entry, dirname, basename, pathname, extname;

for (var i = 0; i files.length; i++) {

entry = files[i];

dirname = path.dirname(entry);

extname = path.extname(entry);

basename = path.basename(entry, extname);

pathname = path.join(dirname, basename);

pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir), '') : pathname;

entries[pathname] = basename;

}

return entries;

}

function getEntry(globPath, pathDir) {

var files = glob.sync(globPath);

var entries = {},

entry, dirname, basename, pathname, extname;

for (var i = 0; i files.length; i++) {

entry = files[i];

dirname = path.dirname(entry);

extname = path.extname(entry);

basename = path.basename(entry, extname);

pathname = path.join(dirname, basename);

entries[basename] = './' + entry;

}

return entries;

}

function getCommonsChunk(globPath, pathDir) {

var files = glob.sync(globPath);

var entries = [],

entry, dirname, basename, extname;

for (var i = 0; i files.length; i++) {

entry = files[i];

dirname = path.dirname(entry);

extname = path.extname(entry);

basename = path.basename(entry, extname);

entries.push(basename);

}

return entries;

}

全局 安装webpack 本地工程 怎么调用

看看webpack官网, 比installation章节, 面介绍安装webpack.

首先需要安装全局webpack

npm install webpack -g

才确使用webpack命令

, 前项目面安装webpack, 官推荐做

npm install webpack --save-dev

自webpack.config.js面便引用webpack

// webpack.config.js

var path = require('path');

var webpack = require('webpack');

使用些plugin候比较便

new webpack.optimize.CommonsChunkPlugin('common.js')

Webpack 怎么用

1. 为什么用 webpack?

他像 Browserify, 但是将你的应用打包为多个文件. 如果你的单页面应用有多个页面, 那么用户只从下载对应页面的代码. 当他么访问到另一个页面, 他们不需要重新下载通用的代码.

他在很多地方能替代 Grunt 跟 Gulp 因为他能够编译打包 CSS, 做 CSS 预处理, 编译 JS 方言, 打包图片, 还有其他一些.

它支持 AMD 跟 CommonJS, 以及其他一些模块系统, (Angular, ES6). 如果你不知道用什么, 就用 CommonJS.

2. Webpack 给 Browserify 的同学用

对应地:

browserify main.js bundle.js

webpack main.js bundle.js

Webpack 比 Browserify 更强大, 你一般会用 webpack.config.js 来组织各个过程:

// webpack.config.js

module.exports = {

entry: './main.js',

output: {

filename: 'bundle.js'

}

};

这仅仅是 JavaScript, 可以随意添加要运行的代码.

3. 怎样启动 webpack

切换到有 webpack.config.js 的目录然后运行:

webpack 来执行一次开发的编译

webpack -p for building once for production (minification)

webpack -p 来针对发布环境编译(压缩代码)

webpack --watch 来进行开发过程持续的增量编译(飞快地!)

webpack -d 来生成 SourceMaps

4. JavaScript 方言

Webpack 对应 Browsserify transform 和 RequireJS 插件的工具称为 loader. 下边是 Webpack 加载 CoffeeScript 和 Facebook JSX-ES6 的配置(你需要 npm install jsx-loader coffee-loader):

// webpack.config.js

module.exports = {

entry: './main.js',

output: {

filename: 'bundle.js'

},

module: {

loaders: [

{ test: /\.coffee$/, loader: 'coffee-loader' },

{ test: /\.js$/, loader: 'jsx-loader?harmony' } // loaders 可以接受 querystring 格式的参数

]

}

};

要开启后缀名的自动补全, 你需要设置 resolve.extensions 参数指明那些文件 Webpack 是要搜索的:

// webpack.config.js

module.exports = {

entry: './main.js',

output: {

filename: 'bundle.js'

},

module: {

loaders: [

{ test: /\.coffee$/, loader: 'coffee-loader' },

{ test: /\.js$/, loader: 'jsx-loader?harmony' }

]

},

resolve: {

// 现在可以写 require('file') 代替 require('file.coffee')

extensions: ['', '.js', '.json', '.coffee']

}

};

5. 样式表和图片

首先更新你的代码用 require() 加载静态资源(就像在 Node 里使用 require()):

require('./bootstrap.css');

require('./myapp.less');

var img = document.createElement('img');

img.src = require('./glyph.png');

当你引用 CSS(或者 LESS 吧), Webpack 会将 CSS 内联到 JavaScript 包当中, require() 会在页面当中插入一个 `style标签. 当你引入图片, Webpack 在包当中插入对应图片的 URL, 这个 URL 是由require()` 返回的.

你需要配置 Webpack(添加 loader):

// webpack.config.js

module.exports = {

entry: './main.js',

output: {

path: './build', // 图片和 JS 会到这里来

publicPath: '', // 这个用来成成比如图片的 URL

filename: 'bundle.js'

},

module: {

loaders: [

{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // 用 ! 来连接多个人 loader

{ test: /\.css$/, loader: 'style-loader!css-loader' },

{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // 内联 base64 URLs, 限定 =8k 的图片, 其他的用 URL

]

}

};

6. 功能开关

有些代码我们只想在开发环境使用(比如 log), 或者 dogfooging 的服务器里边(比如内部员工正在测试的功能). 在你的代码中, 引用全局变量吧:

if (__DEV__) {

console.warn('Extra logging');

}

// ...

if (__PRERELEASE__) {

showSecretFeature();

}

然后配置 Webpack 当中的对应全局变量:

// webpack.config.js

// definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串

var definePlugin = new webpack.DefinePlugin({

__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),

__PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))

});

module.exports = {

entry: './main.js',

output: {

filename: 'bundle.js'

},

plugins: [definePlugin]

};

然后你在控制台里用 BUILD_DEV=1 BUILD_PRERELEASE=1 webpack 编译. 注意一下因为 webpack -p 会执行 uglify dead-code elimination, 任何这种代码都会被剔除, 所以你不用担心秘密功能泄漏.

7. 多个进入点(entrypoints)

比如你用 profile 页面跟 feed 页面. 当用户访问 profile, 你不想让他们下载 feed 页面的代码. 因此你创建多个包: 每个页面一个 "main module":

// webpack.config.js

module.exports = {

entry: {

Profile: './profile.js',

Feed: './feed.js'

},

output: {

path: 'build',

filename: '[name].js' // 模版基于上边 entry 的 key

}

};

针对 profile, 在页面当中插入 script src="build/Profile.js"/script. feed 页面也是一样.

8. 优化共用代码

feed 页面跟 profile 页面共用不要代码(比如 React 还有通用的样式和 component). Webpack 可以分析出来他们有多少共用模块, 然后生成一个共享的包用于代码的缓存.

// webpack.config.js

var webpack = require('webpack');

var commonsPlugin =

new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {

entry: {

Profile: './profile.js',

Feed: './feed.js'

},

output: {

path: 'build',

filename: '[name].js'

},

plugins: [commonsPlugin]

};

在上一个步骤的 script 标签前面加上 script src="build/common.js"/script 你就能得到廉价的缓存了.

9. 异步加载

CommonJS 是同步的, 但是 Webpack 提供了异步指定依赖的方案. 这对于客户端的路由很有用, 你想要在每个页面都有路由, 但你又不像在真的用到功能之前就下载某个功能的代码.

声明你想要异步加载的那个"分界点". 比如:

if (window.location.pathname === '/feed') {

showLoadingState();

require.ensure([], function() { // 语法奇葩, 但是有用

hideLoadingState();

require('./feed').show(); // 函数调用后, 模块保证在同步请求下可用

});

} else if (window.location.pathname === '/profile') {

showLoadingState();

require.ensure([], function() {

hideLoadingState();

require('./profile').show();

});

}

Webpack 会完成其余的工作, 生成额外的 chunk 文件帮你加载好.

Webpack 在 HTML script 标签中加载他们时会假设这些文件是怎你的根路径下. 你可以用 output.publicPath 来配置.

// webpack.config.js

output: {

path: "/home/proj/public/assets", // path 指向 Webpack 编译能的资源位置

publicPath: "/assets/" // 引用你的文件时考虑使用的地址

}

webpack.jspath的简单介绍

本文目录一览: 1、Webpack 配置 2、webpack安装失败,请问这样要怎么解决 3、webpack多页面怎么使用 4、全局 安装webpack 本地工程 怎么调用 5、Webpack 怎么用

2023-12-08
javascript入门笔记1的简单介绍

2022-11-18
python使用笔记23的简单介绍

2022-11-10
javascript简要笔记,JavaScript读书笔记

2022-11-17
c到c语言笔记的简单介绍

2022-11-24
java包笔记,Java语言包

2022-11-18
印象笔记记录java学习(Java成长笔记)

2022-11-12
java客户端学习笔记(java开发笔记)

2022-11-14
重学java笔记,java笔记总结

2022-11-23
java基础知识学习笔记一,Java基础笔记

2022-11-21
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
java学习笔记(java初学笔记)

2022-11-14
java基础第一天学习笔记(java课程笔记)

2022-11-09
重拾python笔记三的简单介绍

2022-11-13
java笔记,大学java笔记

2022-11-28
js修改cssimportant的简单介绍

本文目录一览: 1、js如何直接修改css里面的属性值呢? 2、笔记:JS设置CSS样式的几种方式 3、如何用JS修改已加载的CSS样式表样式? 4、JS修改CSS设置的样式 5、如何使用jquery

2023-12-08
发篇java复习笔记(java课程笔记)

2022-11-09
java笔记,尚硅谷java笔记

2022-12-01
java方向综合笔试题的简单介绍

2022-11-23
Markdown笔记的全方位介绍

2023-05-18