发表于： 2019-10-13 23:46:00
1 708
今天完成的事情：今天主要是学习了webpack，webpack介绍：在开发过程中，我们可以利用模块化开发（CMD模式），将一个大型的功能按不同的小功能，拆分成不同的模块（文件），这样在以后的维护中，我们可以针对不同的功能进行维护，不至于在一个上万行的文件中，找来找去，而且当一个文件很大的时候，电脑不好的在查看，修改的时候会很卡，也不利于工作效率，因此产生了模块化开发这个概念；而webpack正是将模块化进行打包发布处理的一个工具
常见模块化开发规范：CMD（seaJS） AMD（requireJS...）
一、webpack环境搭建1.webpack安装
首先需要安装nodeJS，先在nodeJS官网下载，进行NodeJS安装
下载地址 https://nodejs.org/en/download/
下载完毕后，进行安装，一切都以默认的选择即可
2.npm安装
安装完毕后，打开cmd工具，输入命令
npm install --save mocha
等待安装完毕
3.webpack安装
cmd工具中，输入命令
npm install webpack -g
执行命令安装webpack
到此webpack安装完毕，可以使用
webpack -h
来查看版本号
到此，webpack安装完成
二、webpack打包
1. 打开cmd工具，进入你的开发文件夹，其中此文件夹必须包含webpack.config.js文件，config配置参考如下
var webpack = require("webpack")module.exports = {
entry: { "mcDemoMain": "./mcDemoMain.js"//直接require进来的文件会直接打包到这个文件中，如require('./common/Enum')，延迟加载的文件则不会，如require("bundle?lazy&name=demo!./demo/demo1") },
output: {
path: "../../dist/demo/1.0",//设置打包后的js的输出位置
filename: "[name].js",//和入口文件的名字相同
chunkFilename: "[name].young.js",//值模块里需要单独打包的文件 require.ensure
//path: path.join(__dirname, 'static/js/app/dist'), //设置打包后的js的输出位置
//filename: "[name].[hash].js", //和入口文件的名字相同
publicPath: "[sDomain]static/dist/demo/1.0/" //浏览器会从这个目录开始查找模块 },
module: {
loaders: [ //{ test: /\.css$/, loader: "style!css" },
//{ test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: 'es2015' } },
]
},
plugins: [ new webpack.BannerPlugin('文件顶部注释说明'), // new webpack.IgnorePlugin(/\.\/AsnyModuleA.js$/),//排除不想打包进去的插件
//new webpack.ProvidePlugin({ //这是把jquery挂到全局上，不用每个模块都去require
// "AsnyModuleA": '../../../dist/demo/AsnyModuleA.js',
//}),
//new webpack.optimize.CommonsChunkPlugin('common.js') //有多个入口文件的话提取公共部分，利用浏览器缓存 然后 commonsPlugin 可以用于分析模块的共用代码, 单独打一个包出来: ]
, resolve: { //modulesDirectories: 'C:\Users\Administrator\AppData\Roaming\npm\node_modules',//["C:\Users\Administrator\AppData\Roaming\npm\node_modules"],
//root: 'C:\Users\Administrator\AppData\Roaming\npm\node_modules', alias: { //jquery: path.join(__dirname, 'dev/jquery/jquery.js'),
//AsnyModuleA: "../../../dist/demo/start/commom/AsnyModuleA.js", //在正常情况下我们以CommonJS风格引用avalon,以require('avalon')
//'../avalon': path.join(__dirname, 'dev/avalon/avalon.js')//由于oniui都以是../avalon来引用avalon的，需要在这里进行别名 }
}, //externals: {
// 'AsnyModuleA': 'AsnyModuleA'
//}}2.cmd进入开发目录后，输入
webpack
就可以进行打包了，如果显示以下则表示成功
注明：
sDomain为动态URL路径地址，下次更新sDomain动态路径配置的问题
明天计划的事情：继续学习webpack。
收获：今天一直在报错上面浪费了太多时间，到晚上才明白问题出在了webpack上面，明天继续修改webpack的路径。
返回列表
评论