webpack-demo

webpack-API

Concepts 概念

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into one or more bundles.

在其核心,webpack是现代JavaScript应用程序的静态模块bundler。当webpack处理您的应用程序时,它会递归地构建一个依赖图,其中包括应用程序所需的每个模块,然后将所有这些模块打包成一个或多个包。

Core Concepts


demo1 webpack初识

context

上下文环境 比如你在上课、你当前所在的教室就是上下文环境

entry 入口

定义入口的js文件目录

output 输出

module.exports ={
    //上下文环境
    context:__dirname+'/src',
    //入口   当前目录/src/app.js
    entry:{
        app:'./app.js'
    },
    // 输出位置   当前目录/dist/app.bundle.js
    output:{
        path:__dirname+'/dist',
        filename:'[name].bundle.js'
    }
}

demo2 多个js引入

这个是按顺序的打包js

module.exports = {
    context:__dirname+'/src',
    entry:{
        //按顺序依次打包到当前目录/dist/app.bundle.js
        app:['./aa.js','./bb.js']
    }
    ,
    output:{
        path:__dirname+'/dist',
        filename:'[name].bundle.js'
    }
}

demo3 多个输出

多个输出的文件名为其对应的 key值

module.exports = {
    context:__dirname+'/src',
    entry:{
        //多个输出  生成
        // 当前目录/dist/app.bundle.js
        // 当前目录/dist/bb.bundle.js
        app:'./aa.js',
        aa:'./bb.js'
    }
    ,
    output:{
        path:__dirname+'/dist',
        filename:'[name].bundle.js'
    }
}

demo4提取公共js

const webpack = require('webpack');
module.exports = {
	context: __dirname + '/src',
	entry: {
		app: './app.js',
		a: './a.js',
		b: './b.js'
	},
	output: {
		path: __dirname + '/dist',
		filename: '[name].bundle.js'
	},
	//提取公共部分   这里要安装插件才可以
	plugins: [
		new webpack.optimize.CommonsChunkPlugin({
			name: "commons",
			filename: "commons.js",
			minChunks: 2, 
            //有任意模块加载了两次或更多
            //这里minChunks:2就是设置超过2次以上使用
		}),
	],
}

demo5 热更新

const webpack = require('webpack');
module.exports = {
		context: __dirname + '/src',
		entry: {
			app: './app.js'
		},
		output: {
			path: __dirname + '/dist/assets/',
			filename: '[name].bundle.js',
			publicPath: '/assets'
		},
		devServer: {
			contentBase: __dirname + '/src',
			hot: true,
			inline: true,
			open: true
		},
		plugins: [
			//实现热更新   要全局安装//webpack-dev-server  运行 cnpm install //webpack-dev-server -g
			new webpack.HotModuleReplacementPlugin()
		]
	}
	//index.html 里面 script的src为: /assets/app.bundle.js
	//index.html需要放到 src目录下
	//script 标签中的 /assets 对应的是 output.publicPath 的值
	//需要在本地安装 webpack webpack-dev-server

demo6 es6转换 和加载css样式

先运行这个安装必要的几个模块

cnpm i babel-loader babel-core babel-preset-es2015 style-loader@0.16.1 css-loader@0.28.0 --save-dev

注意千万别按默认下载 css-loader style-loader版本太高可能不生效

建议安装我这里的版本,还有顺序问题一定是style-loader 然后再css-loader ,还要额外注意 webpack2不支持简写[‘style’,’css’]的形式

还有会如果把babel写在这里的配置方法会提示一个警告信息提示

DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56 parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

rules: [{
			test: /\.js$/,
			use: [{
				loader: 'babel-loader',
				options: {
					presets: ['es2015']
				}
			}]
		}]

解决方案是当前目录新建一个 .babelrc文件 内容如下

{
    "presets": ["es2015"]
}

最终配置如下:

module.exports = {
	context: __dirname + '/src',
	entry: {
		app: './app.js'
	},
	output: {
		filename: '[name].bundle.js',
		path: __dirname + '/dist'
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				use: [{
					loader: 'babel-loader'
				}]
			}
			,
			{
				test: /\.css$/,
				//注意默认下载的style-loader css-loader不要太高
				// "css-loader": "^0.28.0",   0.28.7
				// "style-loader": "^0.16.1"  0.19.0版本太高可能会不加载css
				use: [
					{
					loader: 'style-loader'
					},
					{
					loader: 'css-loader'
					}
				]
			}
		 ]
	}
};