zoukankan      html  css  js  c++  java
  • webpack2配置备份

    package.json:

    {
      "name": "leyi",
      "version": "1.0.0",
      "main": "index.js",
      "license": "MIT",
      "scripts": {
        "clean": "rimraf ./dist && mkdir dist",
        "build:dll": "npm run clean && webpack --config ./webpack.dll.config.js",
        "build": "webpack && webpack-dev-server --inline"
      },
      "devDependencies": {
        "art-dialog": "^7.0.0",
        "assets-webpack-plugin": "^3.5.1",
        "babel-core": "^6.25.0",
        "babel-loader": "^7.0.0",
        "babel-polyfill": "^6.23.0",
        "babel-preset-env": "^1.5.2",
        "babel-preset-es2015": "^6.24.1",
        "css-loader": "^0.28.3",
        "eslint": "^4.1.0",
        "extract-text-webpack-plugin": "^2.1.0",
        "file-loader": "^0.11.2",
        "html-webpack-plugin": "^2.28.0",
        "mockjs": "^1.0.0",
        "style-loader": "^0.18.1",
        "url-loader": "^0.5.8",
        "webpack": "^2.6.1",
        "webpack-dev-server": "2.1.0-beta.10"
      },
      "dependencies": {
        "d3": "^4.9.1",
        "jquery": "^1.11.3",
        "save-svg-as-png": "^1.2.0",
        "simple-undo": "^1.0.1",
        "underscore": "^1.8.3"
      }
    }
    

    webapck.dll.config.js:

    var path = require('path');
    var webpack = require('webpack');
    module.exports = {
        entry: {
            dll: ['babel-polyfill','d3', 'jquery','save-svg-as-png','art-dialog']
        },
        output: {
            path:path.join(__dirname,'./dist/js'),
            filename: '[name].bundle.js',/* output.library 将会定义为 window.${output.library} */
            library: '[name]'
        },
        plugins: [
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false
                }
            }),
            new webpack.DllPlugin({ /*path 定义 manifest文件生成的位置 [name]的部分由entry的名字替换*/
                path: path.join(__dirname, '[name]-manifest.json'),
                name: '[name]'/*name dll bundle输出到那个全局变量上和 output.library 一样即可*/
            })
        ]
    };
    

    webapck.config.js: 

    'use strict';
    var path=require('path');
    var webpack =require('webpack');
    var ExtractTextPlugin = require("extract-text-webpack-plugin");
    var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports={
        context:path.join(__dirname,'./src'),
        entry:{
          "home":'./pages/home/js/index.js'
        },
        output:{
            path:path.join(__dirname,'./dist'),
            filename:'js/[name].bundle.js'
        },
        module:{
            rules: [
                {
                    test: /.js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: 'babel-loader'
                    }
                },
                {
                    test: /.css$/,
                    use: ExtractTextPlugin.extract({
                         fallback: "style-loader",
                         use: "css-loader"
                    })
                },
                { test: /.(gif|jpg|png|woff|svg|eot|ttf)??.*$/,
                  loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
                }
            ]
        },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./dll-manifest.json'),
                name: "dll"
            }),
            new webpack.ProvidePlugin({ //全局化变量
                //当webpack碰到require的第三方库中出现全局的$、jQeury和window.jQuery时,就会使用node_module下jquery包export出来的东西
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                "d3":"d3",
                "_":"underscore",
                "dialog":"art-dialog",
                "svg2Png":"save-svg-as-png"
            }),
            new ExtractTextPlugin("css/style.css"),//单独使用link标签加载css并设置路径,相对于output配置中的publickPath
            new webpack.HotModuleReplacementPlugin(), //热加载
    /*        new webpack.optimize.CommonsChunkPlugin({
                name: "common",// 将公共模块提取,生成名为`common`的chunk
                chunks:["home"],//提取哪些模块共有的部分,默认所有
                //filename: "js/common.js",
                //minChunks: 2 // 提取至少2个模块共有的部分
            }),*/
            //压缩代码 编译的速度会变慢,生产时用
    /*        new uglifyJsPlugin({
                compress: {
                    warnings: false,
                    drop_console: true //删除console
                }
            }),*/
            new HtmlWebpackPlugin({
                title:'page1',//用来生成页面的 title 元素
                template:"pages/home/home.html",//自定义的html页(默认支持ejs模板),如果不指定模板,会生成最基本的html结构
                filename:'home.html',//输出的 HTML 文件名,默认是 index.html, 也可以直接配置带有子目录。
                hash:true,//生成hash,对于解除 cache 很有用
                inject:'body',//script资源插入模板的位置| 'head' | 'body' |
                chunks: ['home']//需要引入的chunk,不配置就会引入所有页面的资源
            })
        ],
        devServer:{
            contentBase:path.join(__dirname,'./dist'),
            host: 'localhost',
            progress:true,//显示进度
            port: 3000, //默认8080
            inline: true,
            hot: true//热启动
        }
    }; 
  • 相关阅读:
    GUI 之 JDialog弹窗
    GUI Swing 之 JFrame窗体
    GUI 键盘监听事件
    GUI 窗口监听事件
    GUI 鼠标监听事件,模拟画图工具
    shell编程
    Ubuntu20.04 Linux初识
    rlwrap的使用
    5个相见恨晚的Linux命令,每一个都非常实用
    Bash初识与常用命令
  • 原文地址:https://www.cnblogs.com/leyi/p/6120160.html
Copyright © 2011-2022 走看看