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不适用。
/*
/*
/*
/*
/*
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;
}
/*
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 = {
/*
/*
第三方库,
*/
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 = {
/
/*
/*
/*
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中
标签的图片解析出来, 文件名匹配到这里的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中的
会被编译成
*
* 而
会被编译成
*
* */
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;
SuperMap.Include.js
```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。