一、前言
- 闲暇时间,看了下前端的基础知识,有幸参与了公司公众号项目前面的一个阶段,学习到了一些前端框架的相关知识
- 小结了一下 自己练习通过新建一个个文件组织起项目的过程中的一些理解
二、项目入口
-
vue 中
- 1、首先 webpack 的 entry: 为 app: './src/index.js' ,入口为 js 文件
- 在 webpack 打包后就会在 对应访问的 html 文件里引用 该 js 文件
- 入口 js 的作用
- 初始化的一个全局的 vue 实例,使用实例的 render 方法,挂载 App.vue 组件到当前文件夹下路径下的 index.html 中 (多页面应用中可以是其他文件名,一般跟 js 文件名一致,路径由 webpack 中配置的来控制)
- 在入口 js 中常做的事
- 挂载 store
- 挂载 路由 (VueRouter)
- 设置 filter
- 挂载全局变量如网络请求相关 Vue.prototype.$http = axios
- 引入 reset.css
- 引入 第三方 UI
- 设置 rem 相关
- 2、通过入口 js 来 引用 App.vue 组件
- App.vue 是最外层的一层
- App.vue 中常做的事
- 设置全局的页面滑动、切换动画
- 设置
<router-view/>
- 1、首先 webpack 的 entry: 为 app: './src/index.js' ,入口为 js 文件
-
react 中
- 1、首先 webpack 的 entry: 为 app: './src/index.js' ,入口为 js 文件
- 在 webpack 打包后就会在 对应访问的 html 文件里引用 该 js 文件
- 入口 js 的作用
- 使用 ReactDom.render 方法 挂载
组件 到 当前文件夹下 index.html 中
- 使用 ReactDom.render 方法 挂载
- 在入口 js 中常做的事
- 配置 react-redux、redux-thunk 相关
- 引入 reset.css
- 引入 第三方 UI
- 设置 rem 相关
- 2、通过入口 js 来 引用 app.js 组件
- app.js 是最外层的一层
- app.js 中常做的事
- 设置全局的页面滑动、切换动画 (react-addons-css-transition-group)
- 设置路由 (react-router-dom )
- 1、首先 webpack 的 entry: 为 app: './src/index.js' ,入口为 js 文件
三、webpack 多页面配置
-
参考了部分网上的写法
-
基于 glob 库,得到正确的 js 入口
// 获得入口 js 文件 let entries = getEntry('./src/pages/**/*.js', './src/pages/'); // getEntry 方法 function getEntry(globPath, pathDir) { let files = glob.sync(globPath) let entries = {}, entry, dirname, basename, pathname, extname for (let i = 0; i < files.length; i++) { entry = files[i] dirname = path.dirname(entry) extname = path.extname(entry) basename = path.basename(entry, extname) pathname = path.normalize(path.join(dirname, basename)) pathDir = path.normalize(pathDir) if (pathname.startsWith(pathDir)) { pathname = pathname.substring(pathDir.length) } entries[pathname] = ['./' + entry] } return entries }
-
获取对应 html, 配置 html
// 获取对应 html let pages = Object.keys(getEntry('./src/pages/**/*.html', './src/pages/')) // 利用 HtmlWebpackPlugin 配置 html pages.forEach(function (pathname) { // 配置生成的 html 文件,定义路径等,可根据最终打包的文件要求进行修改 let page = pathname if (pathname.search('/') != -1) { page = pathname.split('/').pop() } // config 对象 let config = { // html 名字 The file to write the HTML to. Defaults to index.html filename: page + '.html', // 模板路径 // html-withimg-loader! 处理 html,以支持直接在html中使用img的src加载图片 template: 'html-withimg-loader!' + 'src/pages/' + pathname + '.html', // js 插入位置 When passing true or 'body' all javascript resources will be placed at the bottom of the body element inject: true, // html 压缩处理 minify: { // removeComments 移除页面注释,默认为true removeComments: true, //collapseWhitespace 移除空格、回车、换行符等符号,默认为true collapseWhitespace: false } // favicon: 'path/to/yourfile.ico' }; if (pathname in module.exports.entry) { // chunks 默认会在生成的 html 文件中引用所有的 js 文件,当然你也可以指定引入哪些特定的文件 // vendors 为第三方库,common 为公共的模块部分,pathname 和 entry 对应 config.chunks = ['common', pathname]; // 给生成的 js 文件一个独特的 hash 值,如 <script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script> config.hash = false; } // 在遍历中配置 (需要生成几个 html 文件,就配置几个 HtmlWebpackPlugin 对象) module.exports.plugins.push(new htmlWebpackPlugin(config)); });