黒い雪 黒い雪 - 7 months ago 35
HTML Question

Putting all the pieces together with webpack

I see a lot of scattered, fragmented, and full but generalized tutorials all over the web for webpack but I'm having a lot of trouble putting the pieces together so I figured I'd just ask directly.

I'm wanting to use webpack to use css pre-processors (namely stylus) and do post-processing (like autoprefix), Minify images, transpile javascript (namely with babel), and I'm using Vue JS to load .vue files which they already have instructions for their part. The project is large so I would need to break it up into chunks that load asynchronously.

Now I see lots of tutorials over the web for this but they assume you know Webpack fundementals which I don't so I'm very confused. I come from a browserify / gulp background if that helps and these are the questions I haven't figured out yet:


  • I can see I'm suppose to require everything including non-js code like stylesheets or images given the correct loader is defined but I still don't quite understand this, how does requiring an image in my code help me and where am I suppose to place these non-js code requires

  • CSS is separate from javascript so, like above, where do I require css in my javascript code and isn't that a bit redundant as its not javascript so I can't execute it.

  • For the code output, especially with chunks and hash names, how do I begin to include that in my index.html file. This especially goes for css which from what I gathered is bundled after being required from the javascript file. Everywhere tells me to set the output name to something like build.js, bundle.js, or [name].js but CSS code can't be in that so I have no idea what to include in the index.html file.

  • I'm seeing lots of conflicting ways to handle external libraries and all seem very fragmented, I just have a set of external libraries that I want loaded first. Most are not built for any module system or expect window globals and have dependencies of their own

  • Images and other media also confuse me, do I also require them in my javascript or required css files and what if I reference images in my index.html file how would I handle that with webpack?



These are what come to mind but I guess theres a lot of basics I'm struggling with so any help would be greatly appreciated. Also here is my webpack.config.js file as I'm not sure if its correct or not or what a lot of these loaders do exactly but I read I needed them

var webpack = require('webpack');

var commonsPlugin =
new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {

entry: {
main: './src/scripts/app/index.js',
vendor: [
"./src/scripts/lib/jquery.min.js",
"./src/scripts/lib/jquery.qtip/jquery.qtip.min.js",
"./src/scripts/lib/jquery.qtip/imagesloaded.pkg.min.js"
]
},

output: {
path: __dirname + '/build',
publicPath: '/',
filename: '[name]-[hash].js'
},

node: {
filename: true,
process: true,
global: true
},

resolve: {
extensions: [
'', // Any
'.js', '.json', // Scripts & Scripts Data
'.vue', // Vue
'css', 'styl', // Styles
'png', 'jpg', 'gif', 'svg' // Images
]
},

module: {
loaders: [{
test: /\.vue$/,
loader: 'vue'
}, {
test: /\.js$/,
loader: 'babel'
}, {
test: /\.css$/,
loader: ['style', 'css']
}, {
test: /\.styl$/,
loader: ['style', 'css', 'stylus']
},{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url',
query: {
// limit for base64 inlining in bytes
// Min 8KB
limit: 8 * 1024,

// custom naming format if file is larger than
// the threshold
name: '[name].[ext]?[hash]'
}
}]
},

plugins: [
commonsPlugin
]
};

Answer

For me it was easier to dig into webpack bit by bit.

Minimal setup for webpack (just bundling multiple files into one) would be look like that:

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: 'dist',
    filename: 'bundle.js'
  }
};

On top of that config you can build up additional functionality one step at a time using loaders.

Loader is basically a thing that reads file content and transforms it in some way. It can be a babel-loader that transpiles ES6 to ECMAScript 5 or an base64-loader that present file content as a base64 string.

You can pick and choose from a whole list of modules. Each one has a github repository with a readme file that contains examples of usage.

To sum up, it is really crucial to get the idea of how webpack works, how it config is structured, what are loaders and plugins. Webpack's docs is a great place to start.

It would be much harder to copy-paste a huge config and try to guess which parts of it are useful.