`
mutongwu
  • 浏览: 448553 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

webpack简单打包PC网站前端资源

阅读更多
 :arrow: 
1. 纯前端的打包输出,比较有局限
2.目录结构
	|--build
	|--app
		|--base //基础核心文件,譬如jQuery,公共Util等
		|--css	
		|--images

		|--plugins	//jQuery插件
			|--jquery.lazyload.js

		|--page		//功能页面模块,每个模块至少包含一个和文件夹同名的js,作为打包入口
			|--common
				|--orderCommon.js
				|--xxx.js
			|--orderDetail
				|--orderDetail.js
			|--orderList
				|--orderList.js
			|--search
				|--search.js
				|--searchHelper.js
			|--abc
				|--abc.js
		|--vendor.js		// 全站公用文件




//vendor.js

import $ from 'jQuery';
import "plugins/jquery.lazyload";

import Util from "app/base/Util";

require('app/css/page/global.css');

//orderDetail.js
import Util from "app/base/Util";

var orderCommon = null;
var orderDetail = {
	init: function(){
		//
	}
};

//异步加载,确保orderCommon将被分割为单独文件加载
require.ensure(['app/page/common/orderCommon'],function(orderCommon){
	orderCommon = orderCommon;
	orderDetail.init();
});




//webpack.config.js

var webpackDevHost = 'localhost'

var path = require('path'),
  webpack = require('webpack'),
  ExtractTextPlugin = require('extract-text-webpack-plugin'),
  Clean = require('clean-webpack-plugin'),
  HtmlWebpackPlugin = require('html-webpack-plugin');

var glob = require('glob');
var AssetsPlugin = require('assets-webpack-plugin');

const BUILD_DIRECTORY = 'build';
const BUILD_DROP_PATH = path.resolve(__dirname, BUILD_DIRECTORY);

var ENV_PRO = false;

var entry = (function getEntry(){
    var entry = {};
    var result = glob.sync(path.join('./app/page', '**/*.js'));

    //获取page下目录,符合 page/xxx/xxx.js 的,将被视为entry入口。
    result.forEach( function(name) {
      var folder = name.split('/')[2],
          filename = name.split('/')[3];
      if(folder !== 'common' && folder + '.js' === filename){
          entry[name.split('/').pop().split('.').shift()] = name;
      }
    });

    //额外的附加入口
    entry.vendor = './app/page/vendor.js';
    entry.jqueryui = './app/page/jqueryui.js';

    // console.log(JSON.stringify(entry));
    return entry;
})();


module.exports = {
    // devtool: 'eval',
    
    // 'webpack-dev-server/client?http://' + webpackDevHost + ':' + webpackDevPort,
    // 'webpack/hot/only-dev-server',
    entry: entry,
    output: {
      path: path.join(__dirname, './build2'),
      filename: ENV_PRO ? '[name].[chunkhash].js': '[name].js',
      chunkFilename: ENV_PRO ?  "[id].[chunkhash].js" : '[id].js',
      pathinfo:  ENV_PRO ? true : false,
      publicPath: 'http://192.168.91.250:1234/build2/'
    },
    plugins: [

      // new webpack.HotModuleReplacementPlugin(),
      // new webpack.NoErrorsPlugin()


      new Clean(['build2'])
      // ,new webpack.ProvidePlugin({
      //     $: "jquery",
      //     jQuery: "jquery",
      //     "window.jQuery": "jquery"
      // })

      ,new ExtractTextPlugin( ENV_PRO ? "[name].[hash].css" : '[name].css')


      // ,new webpack.optimize.CommonsChunkPlugin({
      //       name: "c-commons",
      //       chunks: ["orderDetail", "orderList"]
      //   })


      ,new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        filename:  ENV_PRO ? 'vendor.[chunkhash].js' : 'vendor.js'
        ,minChunks: Infinity
      })

      ,new AssetsPlugin({
          filename: 'webpack.assets.json',
          path: path.join(__dirname, './build2'),
          prettyPrint: true
      })

      // ,new uglifyJsPlugin({
      //   compress: {
      //     warnings: false
      //   }
      // })
    ],
    resolve: {
      alias: {
        app: path.join(__dirname, '/app'),
        base: path.join(__dirname, '/app/base'),
        page: path.join(__dirname, '/app/page'),
        plugins: path.join(__dirname, '/app/plugins'),
        jquery: path.join(__dirname, '/app/base/jquery.pack.js'),
        jQuery: path.join(__dirname, '/app/base/jquery.pack.js'),
        $: path.join(__dirname, '/app/base/jquery.pack.js')
      },
      extensions: ['', '.js', '.jsx']
    },
    module: {
          loaders: [{
            test: /jquery.pack.js/,
            loader: 'expose?$!expose?jQuery!'
          },{ test: /plugins\/jquery\..+\.js$/,
              loader: 'imports?jQuery=jquery,$=jquery,this=>window'
          },{
            test: /\.(js|jsx)$/,
            exclude: /(node_modules)/,
            loader: 'babel?presets[]=es2015,presets[]=stage-3'
          },{
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract("style-loader",'css-loader!sass-loader')
          }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader",'css-loader')
          },{
            test: /\.(jpe?g|png|gif)$/,
            loader: 'url?limit=8192&name=images/[hash].[ext]'
          }, {
            test: /\.(woff|woff2|eot|ttf|svg)$/,
            loader: 'url?limit=8192'
          }, {
            test: /\.html/,
            loader: 'raw'
          }, {
            test: /\.json/,
            loader: 'json'
          }]
    }
}




package.json
{
  "name": "site_pc",
  "repository": "",
  "version": "1.1.0",
  "main": "webpack.config.js",
  "scripts": {},
  "license": "ISC",
  "devDependencies": {
    "assets-webpack-plugin": "^3.3.0",
    "babel-core": "^6.1.21",
    "babel-loader": "^6.1.0",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.1.4",
    "babel-preset-stage-3": "^6.1.2",
    "clean-webpack-plugin": "^0.1.4",
    "css-loader": "^0.23.0",
    "es6-promise": "^3.0.2",
    "expose-loader": "^0.7.1",
    "imports-loader": "^0.6.5",
    "extract-text-webpack-plugin": "^0.9.1",
    "html-loader": "^0.3.0",
    "html-webpack-plugin": "^1.6.2",
    "imports-loader": "^0.6.5",
    "json-loader": "^0.5.3",
    "nib": "^1.1.0",
    "node-sass": "^3.4.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.4",
    "webpack-dev-server": "^1.12.1",
    "webpack-manifest-plugin": "^1.0.0"
  }
}

分享到:
评论

相关推荐

    用webpack同时开发PC站、手机网站的webpack配置.zip

    为解决此问题,"3我的解决办法是在模版手动编辑输入vue、react包和对应的UI框架,以减少vendor包的大小.txt"提出了一个策略:手动调整引入的库,只打包PC或移动设备所需的特定UI框架。 针对这种情况,Webpack 提供...

    vue+webpack 做Pc多页开发

    而Webpack则是一个模块打包器,它可以将各种资源(如JavaScript、CSS、图片等)视为模块,进行管理和打包,为现代前端应用提供强大的构建能力。 标题“vue+webpack 做Pc多页开发”暗示我们将探讨如何利用Vue.js和...

    基于Vue + axios + vuex + webpack + koa + mysql +Linux 开发PC端网站

    4. **webpack**:Webpack 是一个模块打包器,用于管理和构建前端资源。它将各种模块(如JavaScript、CSS、图片等)打包成一个或多个文件,便于浏览器加载和执行。Webpack 提供了丰富的插件系统,可以进行代码分割、...

    基于 react + typescript + webpack 的旅游网站(手机+PC 端).zip

    这是一个使用React、TypeScript和Webpack构建的旅游网站项目,涵盖了前端开发中的多个核心知识点。以下是对这个项目中涉及技术的详细解析: 1. **React**: - React是Facebook开发的JavaScript库,用于构建用户...

    webpack3XVue2全家桶搭建的单页面应用PC用的elementui2移动用的vux

    Webpack是现代JavaScript应用程序的重要模块打包工具,它能够将各种资源(如JavaScript、CSS、图片等)打包成优化过的静态文件,便于部署和运行。Webpack 3.x版本在此基础上提升了性能和优化了一些配置项,使得...

    mui-vue2:mui + mint + vue2.x + vue-router + vuex + webpack最终打包成原生apk的应用项目,样式使用vue移动端mint ui框架,原生手机能力偏重于mui框架,欢迎星级!

    app打包技术是用工具一键打包成APP,也可以通过eclipse本地打包(本地打包是有添加Android sdk包的需求,这里没有介绍,只是简单构建使用,本地打包工程文件如需可以索取) 。这些都是提供一整套技术解决方案。 说明...

    基于webpack的前端工程化多页面入口IE8和移动端开发手脚架

    "基于webpack的前端工程化多页面入口IE8和移动端开发手脚架" 提供了一种解决方案,旨在支持老旧的 IE8 浏览器,同时兼容 PC 和移动端的开发需求。 首先,让我们了解一下什么是 Webpack。Webpack 是一个静态模块打包...

    cli3.0+Vue全家桶+webpack3.0+配套Pc开发demo

    ### 打包 ``` npm run build ``` ### 代码的 lint ``` npm run lint ``` # 项目布局 ``` . ├── public // HTML 和静态资源 │ ├── favicon.ico // 图标 │ ├── index....

    PlayEdu PC 前端项目.zip

    6. **Webpack**: 这是一个模块打包工具,用于处理前端资源,如JavaScript、CSS、图片等,将它们转换并打包成浏览器可以识别的格式。 7. **Babel**: Babel是一个JavaScript编译器,用来将ES6+的新特性转换为浏览器...

    webpack4Vue2全家桶搭建的多页面或单页面应用PC用的elementui2

    1. **Webpack 4**:Webpack 是一个模块打包工具,它将各种资源(如 JavaScript、CSS、图片等)视为模块,通过配置和插件系统进行处理和打包。Webpack 4 引入了零配置的"Create React App"式的启动方式,同时提升了...

    构建PC端项目基于流和前端自动化开发方案

    Webpack则是一个模块打包工具,它可以将各种资源(如JavaScript、CSS、图像等)视为模块,然后根据依赖关系进行打包。Webpack的强大之处在于其插件系统,开发者可以利用各种插件实现代码分割、热模块替换、源映射等...

    pc端项目结构示例gulpwebpackbootstrap

    - `dist`:发布目录,Webpack打包后的结果会被放置在这里,可以直接部署到服务器。 - `node_modules`:存放项目依赖的Node.js模块。 - `.gitignore`:定义哪些文件或文件夹在Git版本控制中忽略。 - `.editorconfig`...

    基于vue+webpack的天气预报网页源码.zip

    3. `index.html`:网页的入口文件,引入Webpack打包后的JS文件。 4. `.babelrc`:Babel的配置文件,用于将ES6+的语法转换为浏览器兼容的ES5语法。 5. `package.json`:项目依赖和脚本配置,包括Vue、Webpack及其...

    基于ecletron打包的pc端工具类应用

    标题中的“基于Electron打包的PC端工具类应用”指的是使用Electron框架开发的桌面应用程序,这类应用通常具有跨平台的能力,可以在Windows、MacOS和Linux等操作系统上运行。Electron是GitHub推出的一个开源项目,它...

    reactpc脚手架

    Webpack4是一个模块打包工具,它可以将各种资源(如JavaScript、CSS、图片等)视为模块处理,并生成一个或多个优化过的静态资源文件。在ReactPC脚手架中,Webpack4作为项目的构建工具,负责编译、打包和优化项目代码...

    react-webpack-mul-page:React + Webpack + gulp 多页面前端脚手架, 集成了 antd-mobile,less, px2rem , 打包自动上传七牛

    该项目的来源,主要由于主站的前端代码越发的臃肿,构建方式老旧,且包含着 PC 端的代码,还需要依赖 python 后端环境,导致前端新入职人员安装环境,上手开发就需要很麻烦。 考虑到,规划目前的主要任务以及活动,...

    直播网站PC端

    9. 部署和运维:最后,项目完成后需要部署到服务器,这可能涉及到Webpack打包、Nginx配置、CDN加速等内容,以实现高效、稳定的运行环境。 综上所述,这个直播网站PC端项目不仅涉及React前端框架的运用,还涵盖了...

    pc端打包好的文件夹(vue)

    "pc端打包好的文件夹(vue)"指的是使用Vue.js进行PC端应用开发后,经过构建打包生成的文件夹,通常包含了运行项目所需的所有资源。 1. **Vue.js 核心概念** - **虚拟DOM**:Vue.js 使用虚拟DOM来提高性能和效率,...

    web开发平台网站模板下载是一款PC手机应用软件开发网站模板下载。_html网站模板_网页源码移动端前端_H5模板_自.rar

    10. **开发工具**:为了更高效地利用这个模板,开发者可能需要熟悉像Sublime Text、Visual Studio Code这样的代码编辑器,以及Git进行版本控制,可能还需要使用如Webpack或Gulp这样的构建工具来优化和打包资源。...

    webpack多入口多出口的实现方法

    webpack是一个前端资源模块化管理和打包工具,它可以将多种静态资源如sass、图片、字体等打包成JavaScript文件。在现代前端开发中,webpack被广泛用于优化加载时间和构建效率。在多页面应用或多组件应用中,往往需要...

Global site tag (gtag.js) - Google Analytics