webpack 从入门到放弃

	var moduleA = function(){
		var a, b;
		return {
			message: function(c){
				alert(a+b+c)
			}
		}
	}()
	(function(window){
		// do something
 		window.jQuery = window.$ = jQuery;
	})(window)

　　var math = require(‘math‘);
    math.add(2, 3);

require([‘math‘], function(math){
   math.add(2,3)
})

import math from ‘math‘;
math.add(2, 3);

require(‘./style.css‘);
require(‘./style.less‘);
require(‘./style.jade‘);
require(‘./image.png‘);

var webpack = require(‘webpack‘);
module.exports = {
  entry: ‘./entry.js‘,
  output: {
     path: __dirname,
     filename: ‘bundle.js‘
  },
  module:{
     loaders: [
      {test: /\.css$/, loader: ‘style-loader!css-loader‘}
     ]
  }
}

var webpack = require(‘webpack‘);
module.exports = {
   entry: ‘./entry.js‘,
   output: {
      filename: ‘bundle.js‘
   },
   module: {
      loaders: [
        { test:/\.css$/, loader: ‘style-loader!css-loader‘}
      ]
   },
   plugin: [
     new webpack.BannerPlugin(‘dujuncheng created‘)
   ]
}

npm init 

cnpm install webpack --save

"dependencies": {
    "webpack": "^2.5.1"
  }

// index.html
<div id=‘app‘></div>
<script src = ‘bundle.js‘>
//entry.js
document.getElementById(‘app‘).textContent = ‘hello‘

webpack entry.js bundle.js

module.exports = ‘dujuncheng‘

var name  = require(‘./name‘);
document.getElementById(‘app‘).textContent=‘hello‘+name

cnpm install css-loader style-loader  --save

"dependencies": {
    "css-loader": "^0.28.1",
    "style-loader": "^0.17.0",
    "webpack": "^2.5.1"
  }

module.exports = {
  entry: ‘./entry.js‘,
  output: {
    path: __dirname,
    filename: ‘bundle.js‘
  },
  module: {
    loaders：[
      { test:/\.css$/, loader: ‘style-loader!css-loader‘ }
    ]
  }
}

body {
  background-color: red
}

// 因为我们配置了webpack.config.js 配置文件，所以我们只要 webpack 就可以打包了
webpack

webpack --devtool source-map

module.exports = {
  entry: ‘./entry.js‘,
  output: {
    path: __dirname,
    filename: ‘bundle.js‘
  },
  devtool: ‘source-map‘,
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ‘style-loader!css-loader‘
      }
    ]
  }
}

cnpm install babel-loader babel-core babel-preset-es2015  --save-dev

npm install --save-dev webpack-bundle-analyzer
//webpack.config.js
var BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin;
 
// ... 
plugins: [new BundleAnalyzerPlugin()]
// ... 

new webpack.optimize.CommonsChunkPlugin({
      name: ‘vendor‘,
      minChunks: ({ resource }) => (
      resource && resource.indexOf(‘node_modules‘) >= 0 &&  resource.match(/\.js$/))
    }),

// import test1 from ‘@/components/test1‘
// import test2 from ‘@/components/test2‘
// import test3 from ‘@/components/test3‘
const test1 = () => import(
    /* webpackChunkName: "Emoji" */
    ‘@/components/test1‘)
const test2 = () => import(
  /* webpackChunkName: "Emoji" */
  ‘@/components/test2‘)
const test3 = () => import(
  /* webpackChunkName: "Emoji" */
  ‘@/components/test3‘)

    filename: ‘[name].js‘,
    chunkFilename: ‘[name].chunk.js‘,

{
  "plugins": ["syntax-dynamic-import"]
}