Skip to content

Instantly share code, notes, and snippets.

@winwu

winwu/愛的webpack.js

Last active February 18, 2017 16:43
Show Gist options
  • Save winwu/5049ef99eea808d6661d8b5fe98e6006 to your computer and use it in GitHub Desktop.
Save winwu/5049ef99eea808d6661d8b5fe98e6006 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
愛的webpack.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
// if you need browsery sync, you should set it to be true.
watch: true,
entry: {
vendor: [
'./resources/assets/js/vendors/jquery.min.js',
'./resources/assets/js/vendors/bootstrap.min.js',
'./resources/assets/js/vendors/highcharts.js'
],
main: './resources/assets/js/main.js'
},
output: {
path: path.join(__dirname, './public/js'),
filename: 'build.js',
// publicPath: '/public/'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename: "vendor.bundle.js"
}),
new webpack.ProvidePlugin({
$: path.join(__dirname, './resources/assets/js/vendors/jquery.min.js'),
jQuery: path.join(__dirname, './resources/assets/js/vendors/jquery.min.js'),
"windows.jQuery": path.join(__dirname, './resources/assets/js/vendors/jquery.min.js'),
'Highcharts': path.join(__dirname, './resources/assets/js/vendors/highcharts.js'),
}),
],
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
// 轉 ES6
{
test: /\.js$/,
loader: 'babel',
// TODO
include: [
path.join(__dirname, './resources/assets/js/')
],
exclude: [
'/node_modules/',
path.join(__dirname, './resources/assets/js/vendors')
]
},
{
test: /\.json$/,
loader: 'json'
},
// {
// test: /\.css$/,
// loader:'style!css!autoprefixer'
// },
//.css 文件想要編譯,sass就需要這些東西!來編譯處理
// install css-loader style-loader sass-loader node-sass --save-dev
// {
// test: /\.scss$/,
// loader: 'style!css!sass?sourceMap'
// }
]
},
babel: {
presets: ['es2015', "stage-2"],
plugins: ['transform-runtime']
},
vue: {
loaders: {
js: 'babel',
scss: 'style!css!sass'
}
},
resolve: {
extensions: ['', '.js', '.vue', '.json'],
},
// 開啟source-map，webpack 有多種 source-map，在官網文檔可以查到
devtool: 'eval-source-map'
};
@winwu
Copy link
Author

winwu commented Feb 18, 2017 •
edited
Loading

新版本 處理 bootstrap material 暴露到 global.

var path        = require('path');
var webpack     = require('webpack');

module.exports = {
    watch: true,
    entry: {
        vendor: [
            './resources/assets/vendors/jquery.min.js',
            './resources/assets/vendors/bootstrap.min.js',
            './resources/assets/vendors/highcharts.js',
            './resources/assets/vendors/bootstrap-material-design-master/dist/js/ripples.min.js',
            './resources/assets/vendors/bootstrap-material-design-master/dist/js/material.min.js'
        ],
        main: './resources/assets/js/main.js'
    },
    output: {
        path: path.join(__dirname, './public/js'),
        filename: 'build.js',
        // publicPath: '/public/'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            filename: "vendor.bundle.js"
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            "window.jQuery": 'jquery',
            "jquery": 'jquery',
            'Highcharts': path.join(__dirname, './resources/assets/vendors/highcharts.js')
        }),
        /*
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    // 壓縮時的警告關上 在 webpack -p 時檔案大小差很多
                    warnings: false
                }
            })
        */
    ],
    module: {
        // expose-loader 將變數暴露到 window.
        // exports-loader 可將某些不支持模塊化的檔案 作為模組 export.
        // 參考 https://webpack.toobug.net/zh-cn/chapter4/exports-loader.html
        loaders: [
            {
                test: path.join(__dirname, './resources/assets/vendors/jquery.min.js'),
                // 將 jQuery 綁定為 window.jQuery 和 window.$
                loader: 'expose?jQuery!expose?$'
            },
            {
                test: path.join(__dirname, './resources/assets/vendors/bootstrap-material-design-master/dist/js/ripples.min.js'),
                loader: 'exports?window.$!script'
            },
            {
                test: path.join(__dirname, './resources/assets/vendors/bootstrap-material-design-master/dist/js/material.min.js'),
                loader: 'exports?window.$!script'
            },
            {
              test: /\.vue$/,
              loader: 'vue'
            },
            // 轉 ES6
            {
                test: /\.js$/,
                loader: 'babel',
                // TODO
                include: [
                    path.join(__dirname, './resources/assets/js/')
                ],
                exclude: [
                    '/node_modules/',
                    path.join(__dirname, './resources/assets/vendors')
                ]
            },
            {
              test: /\.json$/,
              loader: 'json'
            },
            {
                test: /\.css$/,
                loader:'style!css!autoprefixer'
            },
            {
              test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
              loader: 'url',
              query: {
                limit: 10000,
                name: path.join(__dirname, './public/fonts/[name].[hash:7].[ext]')
              }
            }
        ]
    },
    babel: {
        presets: [
            'es2015',
            'stage-2'
        ],
        plugins: ['transform-runtime']
    },
    vue: {
        loaders: {
            js: 'babel',
            scss: 'style!css!sass'
        }
    },
    resolve: {
        extensions: ['', '.js', '.vue', '.json'],
        alias: {
            jquery: path.join(__dirname, './resources/assets/vendors/jquery.min.js'),
        }
    },
    // 開啟 source-map，webpack 有多種 source-map，在官網文檔可以查到
    devtool: 'source-map'
};

npm 需要加裝: exports-loader , expose-loader 。

在主 Vue component 的 mounted 呼叫:

mounted: function(){
      $.material.init();
}

參考:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment