什么是webpack?
webpack是时下很火的一款代码打包工具,理念是“一切皆模块”,能把各种资源作为模块来使用。虽然webpack本身只能打包JS,但其有很多“loader”可以打包各种文件,使得其很强大。最近学习webpack,发现很适合管理三维SPA页面的管理,在此分享一下用webpack引入SuperMap iClent3D 8C for Plugin的方法。本文重点讲webpack配置文件webpack.config.js如何引入iClent3D库。
项目目录结构
build:发布目录,
src: 源文件目录,
static: 静态引用目录,SuperMap iClent3D 8C for Plugin的库放该文件夹,通过打包SuperMap.Include.js动态加载,详见webpack.config.js配置文件的入口设置(entry )。
配置
package.json:描述包的文件,记录了项目的基本信息以及依赖的模块文件。
webpack.config.js: 每个项目下都必须有一个该配置文件,由它告知webpack需要做的工作。下面直接给出我用的配置文件,并附上注释帮助大家理解,参考该配置文件,不仅能引入iClent3d库,可全局引入jQuery和bootstrap。此配置文件适合webpack2.0,webpack1.0不适用。
webpack.config.js
```js require("./postcss.config.js"); var path = require("path"); var webpack = require("webpack"); /* * clean publishing directory * (清空发布目录) * */ var CleanWebpackPlugin = require('clean-webpack-plugin');/*
- create html
- (创建html文件)
- */
var HtmlWebpackPlugin = require(‘html-webpack-plugin’);
/*
- extract css
- (提取css文件)
- */
var ExtractTextPlugin = require(“extract-text-webpack-plugin”);
/*
- merge config
- (合并config文件)
- */
var Merge = require(‘webpack-merge’);
/*
- auto open browser
- (自动打开浏览器)
- */
var OpenBrowserPlugin = require(‘open-browser-webpack-plugin’);
/*
- Detect how npm is run and branch based on that
- (当前 npm 运行)
- */
var currentTarget = process.env.npm_lifecycle_event;
var debug, // is debug
devServer, // is hmr mode
minimize; // is minimize
if (currentTarget == “build”) { // online mode (线上模式)
debug = false, devServer = false, minimize = true;
} else if (currentTarget == “dev”) { // dev mode (开发模式)
debug = true, devServer = false, minimize = false;
} else if (currentTarget == “dev-hmr”) { // dev HMR mode (热更新模式)
debug = true, devServer = true, minimize = false;
}
/*
- proxy target address
- (代理访问地址)
- */
var proxyTarget = ‘http://localhost:8888/’;
var PATHS = {
/*
* publish path
* (发布目录)
* */
publicPath: devServer ? ‘/webpack-iclent3d-demo/build/’ : ‘./’,
/*
* public resource path
* (公共资源目录)
* */
libsPath: path.resolve(process.cwd(), './libs'),
/*
* resource path
* (src 目录)
* */
srcPath: path.resolve(process.cwd(), 'src'),
/*
* node_modules path
*/
node_modulesPath: path.resolve('./node_modules'),
}
var resolve = {
/*
* An array of extensions that should be used to resolve modules
* (引用时可以忽略后缀)
* */
extensions: [".js", “.css”, “.scss”, “.ejs”, “.png”, “.jpg”],
/*
* The directory (absolute path) that contains your modules
* */
modules: [path.resolve(__dirname, "src"), PATHS.node_modulesPath],
/*
* Replace modules with other modules or paths.
* (别名,引用时直接可以通过别名引用)
* */
alias: {
/*
* js
* */
bootstrap: path.join(PATHS.libsPath, "/bootstrap/js/bootstrap.js"),
/*jquery: path.join(PATHS.libsPath, "/jquery/jquery.js"),*/
/*
* css
* */
bootstrapcss: path.join(PATHS.libsPath, "/bootstrap/css/bootstrap.css"),
indexcss: path.join(PATHS.srcPath, "css/index.css"),
}
}
/*
-
The entry point for the bundle.
-
(入口)
-
*/
var entry = {/*
- 主要入口文件index.js
- */
index: “./src/js/index.js”,
/*
-
第三方库,
-
*/
commons: [
/*path.join(PATHS.libsPath, “/jquery/jquery.js”), */
path.join(PATHS.libsPath, “/bootstrap/js/bootstrap.js”),// 这儿引入iClent3D库。
path.join(PATHS.libsPath, “/supermap/SuperMap.Include.js”),
],
};
/*
-
output options tell Webpack how to write the compiled files to disk
-
(webpack 编译后输出标识)
-
/
var output = {
/- determines the location on disk the files are written to
- (输出目录)
- */
path: path.join(__dirname, ‘build’),
/*
- The publicPath specifies the public URL address of the output files when referenced in a browser
- (发布后,资源的引用目录)
- */
publicPath: PATHS.publicPath,
/*
- Specifies the name of each output file on disk
- (文件名称)
- */
filename: devServer ? ‘js/[name].js’ : ‘js/[name]-[chunkhash:8].js’,
/*
- The filename of non-entry chunks as relative path inside the output.path directory.
- (按需加载模块时输出的文件名称)
- */
chunkFilename: devServer ? ‘js/[name].js’ : ‘js/[name]-[chunkhash:8].js’
}
var rules = [{
/*
* 使用babel编译ES6/ES7/ES8为ES5代码
* 使用正则表达式匹配后缀名为.js的文件
*/
test: /.js$/,
/*
* 排除node_modules目录下的文件, npm安装的包不需要编译
*/
exclude: /node_modules/,
/*
* use指定该文件的loader, 值可以是字符串或者数组.
* 这里先使用eslint-loader处理, 返回的结果交给babel-loader处理. loader的处理顺序是从最后一个到第一个.
* eslint-loader用来检查代码, 如果有错误, 编译的时候会报错.
* babel-loader用来编译js文件.
*/
enforce: "pre",
//loader: ["babel-loader", "eslint-loader"]
loader: ["babel-loader"]
},
/*
* Exports HTML as string, require references to static resources.
* (html loader)
* */
{
/*
* 匹配.html文件
*/
test: /\.html$/,
/*
* 使用html-loader, 将html内容存为js字符串, 比如当遇到
* import htmlString from './template.html';
* template.html的文件内容会被转成一个js字符串, 合并到js文件里.
*/
use: "html-loader"
},
/*
* img loader
* */
{
/*
* 匹配各种格式的图片文件
* 上面html-loader会把html中<img>标签的图片解析出来, 文件名匹配到这里的test的正则表达式,
* css-loader引用的图片和字体同样会匹配到这里的test条件.
* */
test: /\.(png|gif|jpe?g)$/,
/*
* 使用url-loader, 它接受一个limit参数, 单位为字节(byte)
* 当文件体积小于limit时, url-loader把文件转为Data URI的格式内联到引用的地方
* 当文件大于limit时, url-loader会调用file-loader, 把文件储存到输出目录, 并把引用的文件路径改写成输出后的路径
* 比如 views/foo/index.html中的<img src="smallpic.png">会被编译成
* <img src="https://img-blog.csdnimg.cn/2022010618312718849.png">
* 而<img src="largepic.png">会被编译成
* <img src="/f78661bef717cf2cc2c2e5158f196384.png">
* */
use: [{
loader: "url-loader",
options: {
limit: 10000,
name: '/images/[name]-[hash:8].[ext]'
}
}]
},
/*
* font loader
* */
{
test: /\.(eot|woff|woff2|ttf|svg)$/,
use: [{
loader: "url-loader",
options: {
limit: 5000,
name: '/fonts/[name]-[hash:8].[ext]'
}
}]
},
/*
* Extract css files
* (提取css到单独文件loader)
*/
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "postcss-loader", "sass-loader"],
publicPath: "./"
})
},
];
var plugins = [
/*
* gloabal flag
* (全局标识)
* */
new webpack.DefinePlugin({
/*
* dev flag
* (开发标识)
* */
__DEV__: debug,
/*
* proxy flag
* (代理的标识)
* */
__DEVAPI__: devServer ? "/devApi/" : "''",
}),
/*
* clean publishing directory
* (发布前清空发布目录)
* */
new CleanWebpackPlugin(['build'], {
root: '', // An absolute path for the root of webpack.config.js
verbose: true, // Write logs to console.
//dry: false // Do not delete anything, good for testing.
dry: devServer ? true : false
}),
/*
* commons js
* (公共js)
* */
new webpack.optimize.CommonsChunkPlugin(
/* devServer ?
{name: "common", filename: "js/common.js"}:
{names: ["common", "webpackAssets"]}*/
{
names: ["index", "commons", "webpackAssets"]
}
),
/*
* Module (value) is loaded when the identifier (key) is used as free variable in a module
* (如:使用jquery 可以直接使用符号 "$")
* */
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery",
}),
/*
* extract css
* (提取css文件到单独的文件中)
*/
new ExtractTextPlugin({
filename: devServer ? "css/[name].css" : "css/[name]-[chunkhash:8].css",
disable: false,
allChunks: true
}),
/*
*create html file
* (创建html文件)
* */
new HtmlWebpackPlugin({
filename: 'index.html',
template: __dirname + '/src/index.html',
/*
* inject: true | 'head' | 'body' | false Inject all assets into the given template or templateContent -
* When passing true or 'body' all javascript resources will be placed at the bottom of the body element.
* 'head' will place the scripts in the head element.
* */
inject: 'true',
// 需要依赖的模块
chunks: ["index", "commons", "webpackAssets"],
// 根据依赖自动排序
chunksSortMode: 'dependency'
})
];
if (minimize) {
plugins.push(
/*
* Uglify
* (压缩)
* */
new webpack.optimize.UglifyJsPlugin({ // js、css都会压缩
mangle: {
except: ['$super', '$', /*'exports', 'require', 'module'*/ ]
},
compress: {
warnings: false
},
output: {
comments: false,
}
})
)
}
var config = {
/*
* 配置页面入口js文件
/
entry: entry,
/
* Like resolve but for loaders.
* (查找loader 的位置)
* */
/resolveLoader: {root: path.join(__dirname, “node_modules”)},/
output: output,
module: {
rules: rules
},
resolve: resolve,
plugins: plugins,
}
/*
-
Hrm setting
-
(开启热更新,并自动打开浏览器)
-
*/
if (devServer) {config = Merge(
config, {
plugins: [
// Enable multi-pass compilation for enhanced performance
// in larger projects. Good default.
new webpack.HotModuleReplacementPlugin({
multiStep: true
}),
new OpenBrowserPlugin({
url: ‘http://localhost:8080’ + PATHS.publicPath + ‘index.html’
})
],
devServer: {
// Enable history API fallback so HTML5 History API based
// routing works. This is a good default that will come
// in handy in more complicated setups.
historyApiFallback: true,// Unlike the cli flag, this doesn't set // HotModuleReplacementPlugin! hot: true, inline: true, // Display only errors to reduce the amount of output. stats: 'errors-only', // Parse host and port from env to allow customization. // // If you use Vagrant or Cloud9, set // host: options.host || '0.0.0.0'; // // 0.0.0.0 is available to all network devices // unlike default `localhost`. host: "localhost", // Defaults to `localhost` process.env.HOST port: 8080, // Defaults to 8080 process.env.PORT /* * 代理访问 * 1、可以绕过同源策略 和 webpack '热更新'结合使用 */ proxy: { '/devApi/*': { target: proxyTarget, secure: true, stats: { colors: true }, /* * rewrite 的方式扩展性更强,不限制服务的名称 * */ rewrite: function (req) { console.log(req.url); req.url = req.url.replace(/^\/devApi/, ''); } } } } }
);
}
module.exports = config;
<h2>SuperMap.Include.js</h2>
```js
function _IncludeScript(inc){
var script='<'+'script type="text/javascript" src="..././static/lib_Realspace/'+inc+'"'+'><'+'/script>';
document.writeln(script);
}
function _Include2DScript(inc){
var script='<'+'script type="text/javascript" src="../../static/lib_Ajax/'+inc+'"'+'><'+'/script>';
document.writeln(script);
}
if(!Function.__typeName)
{
_Include2DScript('MicrosoftAjax.js');
_Include2DScript('SuperMap-7.0.1-11323.js');
_IncludeScript('SuperMap.Web.Realspace.js');
}
结果
如图页面能看见三维球,带有bootstrap风格,说明iClent3D库引入成功,jQuery和bootstrap引入成功。分享到此,有疑问欢迎留言提出,共同学习。
参考资料
1、前端模块化开发的价值;
2、webpack学习之路;
3、webpack1.0迁移到2.0。