webpack入门配置，图文附源码

源码：进阶版：https://gitee.com/Moruin/moruin-study

1.1、创建package.json文件

执行命令：

npm init

如下图：

执行完后在项目下会出现package.json文件

1.2、安装webpack

//全局安装

npm install -g webpack

//安装到你的项目目录

npm install --save-dev webpack

这里安装到项目目录，如下图：

执行完后，会在目录生成node_modules文件夹，package-lock.json文件

1.3、配置webpack.config.js文件

在项目根目录新建webpack.config.js文件，并输入以下代码配置：

const path = require('path');

module.exports = {

entry: './src/index.js',//需要解析的js文件名

output: { filename: 'index.js',//解析完的文件名

path: path.resolve(__dirname, 'dist') }

};

1.4、创建存放文件的文件夹

在项目目录下新建src文件夹，里面新建index.js文件，输入以下代码测试：

console.log("hello world!")

然后在cmd输入

node_modules\.bin\webpack

如下图就是打包成功了！

1.5、HtmlWebpackPlugin安装与配置

本插件是用于自动生成html文件

cmd输入下列代码安装：

npm install --save-dev html-webpack-plugin

如下图：

配置webpack.config.js文件：

var HtmlWebpackPlugin = require('html-webpack-plugin');//新增

var path = require('path'); module.exports = {

entry: './src/index.js',//需要解析的js文件名

output: { filename: 'index.js',//解析完的文件名

path: path.resolve(__dirname, 'dist')

},

plugins: [new HtmlWebpackPlugin()]//新增

};

配置好后，再运行node_modules\.bin\webpack打包一下，会发现dist文件夹里多了index.html文件，并且自动导入了index.js文件

1.6、babel-loader安装与配置

首先安装babel-loader：

npm install --save-dev [email protected][email protected][email protected]

如下图：

然后修改配置文件webpack.config.js:

const path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: './src/index.js',

output: {

filename: 'index.js',

path: path.resolve(__dirname, 'dist')

},//新增

module: {

rules: [

{

test: /\.m?js$/,

exclude: /(node_modules)/,

use: {

loader: 'babel-loader',

options: {

presets: ['env']

}

}

}

]

},

plugins: [new HtmlWebpackPlugin()] };

配置好了之后，修改Index.js文件，使用ES6语法：

然后执行打包，查看是否成功：

1.7、react安装与配置

安装命令与babel类似：

npm install --save-dev [email protected]

npm install [email protected][email protected]

如下图：

修改配置文件：

const path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: './src/index.js',

output: {

filename: 'index.js',

path: path.resolve(__dirname, 'dist') },

module: {

rules: [{

test: /\.m?js$/,

exclude: /(node_modules)/,

use: {

loader: 'babel-loader',

options: { presets: ['env', 'react'] }

}

}

] },

plugins: [

//处理html文件，使用模板

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

] };

这里template属性是使用src目录下的index.html文件当做模板来转换

配置好后，编写index.js，使用react：

import React from 'react';

import ReactDOM from 'react-dom';

ReactDOM.render(

<h1>Hello mybro!</h1>,

document.getElementById('app')

);

写好后打包，然后打开dist文件夹下的index.html文件查看效果：

1.8、加载css，css-loader安装与配置

命令安装：

npm install --save-dev [email protected][email protected]

如下图：

修改配置文件：

const path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: './src/index.js',

output: { filename: 'index.js', path: path.resolve(__dirname, 'dist') },

module: {

rules: [ //js文件 { test: /\.m?js$/, exclude: /(node_modules)/,

use: {

loader: 'babel-loader',

options: { presets: ['env', 'react'] }

}

},

//css文件

{ test: /\.css$/, use: ['style-loader', 'css-loader'] }

] },

plugins: [

//处理html文件，使用模板

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

] };

src目录下新建index.css，并编写样式：

index.js文件引入css文件：

import './index.js';

最后打包，刷新页面查看效果：

注意：这里的css文件编译可以在dist目录下的index.js文件里看到，是很长的一段，所以为了方便，我们需要把css文件独立出来，以便查看并减少渲染时间。

1.9、独立css文件，ExtractTextWebpackPlugin安装

安装命令：

npm install --save-dev [email protected]

如下图：

修改配置文件：

const path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: './src/index.js', output: { filename: 'index.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ //引入js文件 { test: /\.m?js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'] } } }, //引入css文件 { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } ] }, plugins: [ //处理html文件，使用模板 new HtmlWebpackPlugin({ template: './src/index.html' }), //处理css文件 new ExtractTextPlugin("index.css"), ] };

修改好后打包，可以看到dist目录下多出了index.css文件，并且页面效果依然。

1.10、图片文件处理

安装file-loader，url-loader：

npm install --save-dev [email protected][email protected]

如下图：

修改配置文件：

const path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: './src/index.js', output: { filename: 'index.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ //引入js文件 { test: /\.m?js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'] } } }, //引入css文件 { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, //图片处理 { test: /\.(png|jpg|gif)$/i, use: [{ loader: 'url-loader', options: { limit: 8192 } }] } ] }, plugins: [ //处理html文件，使用模板 new HtmlWebpackPlugin({ template: './src/index.html' }), //处理css文件 new ExtractTextPlugin("index.css"), ] };

然后引入图片：

ok，打包，刷新页面：

1.11、独立公共文件

不需要安装，直接修改配置文件：

const path = require('path'); const webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: './src/index.js', output: { filename: 'js/index.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ //引入js文件 { test: /\.m?js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'] } } }, //引入css文件 { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, //图片处理 { test: /\.(png|jpg|gif)$/i, use: [{ loader: 'url-loader', options: { limit: 8192, name: 'resource/[name].[ext]' } }] } ] }, plugins: [ //处理html文件，使用模板 new HtmlWebpackPlugin({ template: './src/index.html' }), //处理css文件 new ExtractTextPlugin("css/[name].css"), //独立公共组件 new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: 'js/base.js' }) ] };

修改好了之后，删掉dist文件夹，重新打包后，dist目录结构就比较清晰：

1.12、webpack-dev-server自动刷新配置

安装命令：

npm install --save-dev [email protected]

如下图：

修改配置文件：

const path = require('path'); const webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), publicPath: '/dist/', filename: 'js/index.js' }, module: { rules: [ //引入js文件 { test: /\.m?js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'] } } }, //引入css文件 { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, //图片处理 { test: /\.(png|jpg|gif)$/i, use: [{ loader: 'url-loader', options: { limit: 8192, name: 'resource/[name].[ext]' } }] } ] }, plugins: [ //处理html文件，使用模板 new HtmlWebpackPlugin({ template: './src/index.html' }), //处理css文件 new ExtractTextPlugin("css/[name].css"), //独立公共组件 new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: 'js/base.js' }) ], devServer: { //默认是8080端口，为了避免冲突修改一下 port: 8095 } };

然后不需要执行打包，执行新的命令：

node_modules\.bin\webpack-dev-server

如下图：

到此自动刷新就完成了，修改js文件查看实时修改效果。

最后修改package.json文件：

这样修改之后，我们可以直接执行一条短的命令就可以自动打包了：

npm run dev

如图：

打包就变成了：

npm run dev

如图：

好人一生平安！