webpack配置

描述：webpack用来处理js，html，es6语法，样式表，静态资源的配置

系统：windows10

工具：nodejs 6.12.3，yarn 1.3.2，webpack 3.10.0

步骤：

        安装webpack，项目目录下执行   yarn add webpack@3.10.0 --dev 

webpack基础的打包js文件

          在项目目录下新建文件 webpack.config.js    (webpack配置文件) ，新建文件夹src并在内新建app.js的测试，copy以下             内容。

const path = require('path');

module.exports = {
    //入口
  	entry: './src/app.jsx',
    //出口 
  	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'app.js'
  	}
};

        因为没有全局安装webpack所以执行打包命令为 node_modules/.bin/webpack

        成功后会生成一个dist文件夹，文件为app.js，里面是打包好的代码。

用HtmlWebpackPlugin来打包html

        ①安装插件 yarn add html-webpack-plugin@2.30.1 --dev

        ②在配置文件引入并配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path 		= require('path');

module.exports = {
    //入口
  	entry: './src/app.js',
    //出口 
  	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'app.js'
  	},
  	plugins: [new HtmlWebpackPlugin()]
};

        成功后会在dist文件夹下生成一个index.html的文件。

       自定义plugins可以参考它的github 。

plugins: [new HtmlWebpackPlugin({
		template: './src/index.html' 
	})]

       例：通过template自定义一个模板。

babel-loader用来把ES6转化为ES5

        ①安装依赖yarn add babel-loader@7.1.2 babel-core@6.26.0 babel-preset-env@1.6.1 --dev

        ②在webpack.config.js内添加module

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path 		= require('path');

module.exports = {
    //入口
  	entry: './src/app.js',
    //出口 
  	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'app.js'
  	},
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /(node_modules)/, //对这些文件不做处理
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['env']
					}
				}
			}
		]
	},
	plugins: [new HtmlWebpackPlugin({
		template: './src/index.html'
	})]
};

        然后执行打包就可以看到dist/app.js 内转化的代码。

css-loader用来处理样式表文件

        ①安装yarn add style-loader@0.19.1 css-loader@0.28.8 --dev

            在配置文件中添加

module: {
		rules: [
			{
				test: /\.jsx$/,
				exclude: /(node_modules)/, //对这些文件不做处理
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['env','react']
					}
				}
			},
			{
				test: /\.css$/,
				use: [
					'style-loader',
					'css-loader'
				]
			}
		]
	},

        ②需要在js文件中引入css文件才能生效。

        因为和js文件打包在一起了，所以需要插件来将它分离出来，我们用到的下面这个插件。

extract-text-webpack-plugin用来分离打包在js内的css代码

        ①首选安装插件： yarn add extract-text-webpack-plugin@@3.0.2 --dev

        ②在配置文件中替换use，并且在最上层引入插件。

const ExtractTextPlugin = require("extract-text-webpack-plugin");

use: ExtractTextPlugin.extract({
			        fallback: "style-loader",
			        use: "css-loader"
		        })

        ③在plugins里new一个对象出来，他有一个参数，就是css打包文件名。

plugins: [
	new ExtractTextPlugin("index.css")
]

        成功后会在dist目录下出现index.css的文件。