webpack入门指南

责编:menVScode 2017-12-27 14:39 阅读(884)

        打包初体验

        用npm初始化项目,生成 package.json 文件,管理包文件。

 npm init -y

        安装 webpack,当前版本号 3.10.0

 npm install webpack --save-dev

        配置  package.json

{
  "name": "menvscode.com",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack"  //webpack命令默认会运行package.config.js配置文件  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.10.0"
  }
}

        注意:"dev":"webpack" 命令默认是会运行webpack.config.js配置文件;如果要运行其他配置文件,那么命令应改为:"dev": "webpack --config 配置文件名"

        配置 package.config.js

const path = require('path');
module.exports = {
    entry: './src/app.js', //入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),//打包好文件的存放路劲
        filename: 'main.js' // 打包好文件的名字
    }
};

        注意:path对应的路劲必须要绝对路径

        打包操作

npm run dev

        文件目录

--demo
  --dist
    --main.js //打包生成的
    --index.html
  --node_modules
  --src
    --app.js
    --b.js
    --index.html
  --package.json
  --webpack.config.js
  


        插件 -- html-webpack-plugin

        在打包初体验阶段,打包成功后dist文件中是不会自动生成的,而是手动添加的;可用 html-webpack-plugin 插件自动生成 index.html文件。

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

        在 webpack.config.js 配置

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

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

        按照上面的配置默认会在dist目录下生成 index.html 文件

<!--生成的index.html结构-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="main.js"></script></body>
</html>

        在已有的index.html模板上(src目录下),再添加其他内容,配置如下:

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

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
	plugins:[
		new htmlWebpackPlugin({
			filename:'mvc.html',//打包后新建文件的名字,默认是index.html
			template:'./src/index.html' //以index.html模板基础上再去创建
		})
	]
};

        dist目录下生成 mvc.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menvscode</title>
</head>
<body>
    <div><h2>menvscode.com</h2></div>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

        

        loader

        loader 就是 webpack 用来预处理模块的,在一个模块被引入之前,会预先使用 loader 处理模块的内容。

        编译解析 react jsx 代码实例

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

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
	plugins:[
		new htmlWebpackPlugin({
			filename:'index.html',//打包后新建文件的名字,默认是index.html
			template:'./src/index.html' //以index.html模板基础上再去创建
		})
	],
	module:{
		rules:[
			{
			    test:/\.js$/, // 匹配js结尾的文件
			    exclude: /node_modules/,
			    use:[
			            {
				        loader:'babel-loader', // 需要npm下载对应的 "babel-core babel-loader --save-dev
options:{     presets:['react'] //需要npm下载对应的 babel-preset-react --save-dev }     } //使用babel-loader,还需要预设,也可以在项目的根目录中创建一个 .babelrc 文件并启用一些插件     ] } ] } };


        devserver 介绍 --  webpack-dev-server

        wepback 开发服务器,项目可以跑在服务器上,通过请求可以访问项目。

        webpack-dev-server会把项目进行打包,打包完成后并不是把资源放在本地(dist 目录)下,它会把打包好的资源放在内存里。当访问项目的时候,webpack-dev-server会从内存中提取我们要获取的资源。

        webpack-dev-serve会自动监视文件内容变化,当内容发生改变后,内存中相应的资源会被替换,自动刷新浏览器页面。

        下载 webpack-dev-server

npm install webpack-dev-server --save-dev

        在 webpack.js 中 scripts 对象处做运行配置:"start": "webpack-dev-server"

{
  "name": "demo01",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack",
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },
  "dependencies": {}
}

        通过 npm start 进行运行,成功后默认地址是 http://localhost:8080/,但也可以在webpack.config.js进行配置。

        注意:"start": "webpack-dev-server" 命令默认是会运行webpack.config.js配置文件;如果要运行其他配置文件,那么命令应改为:"start": "webpack-dev-server

 --config 配置文件名"。

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
	plugins:[
		new htmlWebpackPlugin({
			filename:'index.html',//打包后新建文件的名字,默认是index.html
			template:'./src/index.html' //以index.html模板基础上再去创建
		})
	],
	devServer:{
		open:true, //自动打开浏览器
		port:9898 //指定端口
	},
	module:{
		rules:[]
	}
	
};


        引入 css 样式

        安装 css-loader:打包的时候,将css文件编译为js文件,样式存在于js文件中。

npm install css-loader --save-dev

        安装 style-loader:将打包好的样式插入到页面结构中,只安装 css-loader 页面是不会加载样式的。

npm install style-loader --save-dev

        两者的处理文件顺序:css-loader先找到css文件编译打包操作,再由style-loader进行插入到页面结构中。

        以react为例

//入口文件
import React from 'react';
import ReactDom from 'react-dom';
import './main.css'

ReactDom.render(
	<div>hrlle1111</div>,
	document.getElementById('root')
)

        配置css的loader

module:{
    rules:[
        {
            test:/\.css$/,
            use:['style-loader','css-loader'] //安装style-loader css-loader --save-dev
        }
			
    ]
}

        

        引入图片(一)-- file-loader

        安装 file-loader 

npm install file-loader --save-dev

        main.css:style-loader、css-loader 处理css文件,当遇到图片类型的模块也需要对应的loader。file-loader会将图片进行重命名。

body{background:url('../img/321.gif');}

        配置file-loader

module:{
    rules:[
        {
            test:/\.(jpg|gif|jpeg|gif|png)$/,
            //use:['file-loader'] // 安装file-loader --save-dev             use:[                 {                     loader:'file-loader',                     options:{                         name:'[path][name].[ext]',                         outputPath: 'images/' // 图片会被打包在 dist/images 目录下                     }                 }             ]         }     ] }

        注意:设置 name 参数后,解析结果

body{background:url(images/src/common/img/321.gif);}

        不设置 name 参数    

body{background:url(images/a0a2dd29db67e043813bff89e9c1e178.gif);}

        更多参数情况可以访问:https://github.com/webpack-contrib/file-loader


        引入图片(二)

        在html结构中也会用到图片,以react为例:

        import React from 'react';

import ReactDom from 'react-dom';
import './common/style/main.css';
import tuzi from './common/img/321.gif';
console.log(tuzi) //-- 打包还是由file-loader来处理的
// images/a0a2dd29db67e043813bff89e9c1e178.gif
const pic = require('./common/img/456.jpg')
ReactDom.render(
	<div>
		hrlle1111
		<img src={tuzi} />
		<img src={pic} />
		<img src={require('./common/img/456.jpg')} />
	</div>,
	document.getElementById('root')
)

        

        使用 url-loader 引入图片

        url-loader 也有 file-loader的功能,只不过它把图片以base64的格式输出了;可以减少图片的请求,请求页面的时候,图片就过来了。如果图片过大,编码的量就会变大。

module:{
    rules:[
            {
            test:/\.(jpg|gif|jpeg|gif|png)$/,
            use:[
                    {
                        loader:'url-loader',// 安装 url-loader --save-dev
                        options:{
                            outputPath: 'images/', // 图片会被打包在 dist/images 目录下
                            limit:10240 //大于10kb进行转码显示
                        }
                    }
                ]
            }
        ]
    }


        引入字体(一)

        本地下载好字体库,也是可以通过 file-loader 来处理的。

FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2

        main.css

@font-face{
    font-family:'f'; /* 指定这套字体的名字 */
    src:url('../fonts/fontawesome-webfont.ttf');/* 查找字体文件的路劲 */
}
.rocket{
    font-family:'f';
    font-size:50px;
}
.rocket:before{
    content:'\f135'
}

        webpack.config.js

module:{
    rules:[
        {
            test:/\.js$/, // 匹配js结尾的文件
            exclude: /node_modules/,
            use:[
                    {
                        loader:'babel-loader',
                        options:{
                            presets:['react'] //需要npm下载对应的 babel-preset-react
		        }
                    } //使用babel-loader还需要预设,也可以在项目的根目录中创建一个 .babelrc 文件并启用一些插件	
                ]
        },
        // 处理css文件出现的url,会自动帮你引入里面要引入的模块
        {
            test:/\.css$/,
            use:['style-loader','css-loader'] //安装style-loader css-loader --save-dev
        },
        // file-loader:1、把你的资源移动到输出目录;2、返回最终引入资源的url。
        {
            test:/\.(jpg|gif|jpeg|gif|png)$/,
            use:[
                    {
                        loader:'url-loader',// 安装url-loader --save-dev
                        options:{
                            outputPath: 'images/', // 图片会被打包在 dist/images 目录下
                            limit:10240 //大于10kb进行转码显示
                        }
                    }
                ]
        },
        {
            test:/\.(ttf|otf|svg|eot|woff|woff2)$/,
            use:['file-loader']
        }
    ]
}

        app.js

import React from 'react';
import ReactDom from 'react-dom';
import './common/style/main.css';

ReactDom.render(
	<div className="rocket"> React </div>,
	document.getElementById('root')
)

          

        引入字体(二)

        当时用使用第三UI框架的时候,本身自带字体图标。

        引入第三方字体库,如:http://fontawesome.io/icons/        

npm install --save font-awesome

        app.js

import React from 'react';
import ReactDom from 'react-dom';
// font-awesome css文件
import 'font-awesome/css/font-awesome.css';

ReactDom.render(
	<div className="fa fa-rocket"> React </div>,
	document.getElementById('root')
)

        font-awesome.css (部分)

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
    url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
    url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
    url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
    url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

        当webpack用 { test:/\.(ttf|otf|svg|eot|woff|woff2)$/, use:['file-loader'] } 进行匹配的时候,内部规则只会对 '../fonts/fontawesome-webfont.eot' 进行匹配,直接忽略后面的查询字符串。


        css 模块化(一)

        webpack.config.js

module:{
    rules:[
        // 处理css文件出现的url,会自动帮你引入里面要引入的模块
        {
            test:/\.css$/,
            use:[
                'style-loader',
                {
                    loader:'css-loader',
                    options:{
                        module:true // 默认是false,不开启模块化
                    }
                }
            ]
        }
    ]
}

        main.css

body{background: red;}
.ot{background: #abcdef;}
.ot .ac{font-size: 20px;}

        app.js

import React from 'react';
import ReactDom from 'react-dom';
import style from './common/style/main.css'; //启用模块话设置后,引入css文件会返回一个对象

console.log(style) 
// 类名进行重新编码
// {ot: "_7LqHWv4QCuI59VL4xcYFH", ac: "_2T6iV1ccBCVcVqJTIlVKAx"}

ReactDom.render(
	<div className={style.ot}> <span className={style.ac}>React</span> </div>,
	document.getElementById('root')
)

        

        css 模块化(二)

        有些css文件需要全局使用,不需要被模块化使用。

        localIdentName: 控制编译后样式中css的class名字,默认是hash值( [hash:base64] ),控制6个字符长度: [hash:base64:6]。

        localIdentName: '[path]-[name]-[local]-[hash:base64:6]';分别代表:当前的路劲-css文件名-class名-hash值。

        use:['style-loader','css-loader']:执行顺序:先css-loader再style-loader; 整个rules是先从底部代码开始执行的。

        webpack.config.js

module:{
    rules:[
        // 处理css文件出现的url,会自动帮你引入里面要引入的模块
        {
            test:/\.css$/,
            use:[
                'style-loader',
                {
                    loader:'css-loader',
                    options:{
                        module:true // 默认是false,不开启模块化
                        localIdentName:'[local]'
                    }                 }             ],             exclude: [                 path.resolve(__dirname, 'node_modules'),                 path.resolve(__dirname, 'src/common'),             ]         },         {             test:/\.css$/,             use:['style-loader','css-loader'], // 执行顺序:先css-loader再style-loader; 整个rules是先从底部代码开始执行的。             include: [                 path.resolve(__dirname, 'node_modules'),                 path.resolve(__dirname, 'src/common'),             ]         }     ] }

        app.js

import React from 'react';
import ReactDom from 'react-dom';
//import style from './common/style/main.css'; //启用模块话设置后,引入css文件会返回一个对象
import 'font-awesome/css/font-awesome.css';
import style from './main.css';

// console.log(style) 
// 类名进行重新编码
// {ot: "_7LqHWv4QCuI59VL4xcYFH", ac: "_2T6iV1ccBCVcVqJTIlVKAx"}

ReactDom.render(
	<div className="fa fa-rocket"> <span className={style.ot}>React</span> </div>,
	document.getElementById('root')
)


        使用 less 和 scss

        安装scss预处理器需要同时安装:sass-loader node-sass。

npm install sass-loader node-sass --save-dev

        webpack.config.js

module:{
    rules:[
        {
            test:/\.scss$/,
            // use:['style-loader','css-loader','sass-loader']
            use: [ // 模块化设置
                'style-loader' ,
                {
                    loader: 'css-loader',
                    options: {
                        module: true,
                        localIdentName: '[local]'
                    }
                },
                'sass-loader'
            ],
            exclude: [
                path.resolve(__dirname, 'node_modules'),
                path.resolve(__dirname, 'src/common')
            ]
        },
        {
            test: /\.scss$/,
            use: [ 'style-loader', 'css-loader', 'sass-loader' ],
            include: [
                path.resolve(__dirname, 'node_modules'),
                path.resolve(__dirname, 'src/common')
            ]
        }
    ]
}

        app.js

import React from 'react';
import ReactDom from 'react-dom';
//import './common/style/main.scss'; 
//通过配置文件对scss文件模块化设置后,引入方式如下:
//不在common文件夹内的scss文件做模块化操作
import style from './main.scss'; 
ReactDom.render(
	<div className={style.mvc}> <span className="">React</span> </div>,
	document.getElementById('root')
)

        

        编译 less 文件需要同时安装:less-loader、less。

npm install less-loader less --save-dev

        配置方式同scss配置。


        babel

        babel官网:http://babeljs.io/

        【1】首先安装 babel-cli:http://babeljs.io/docs/usage/cli/

npm install --save-dev babel-cli

        babel:把es6的代码编译成es5的,.......。

        babel的插件:babel的运行是基于babel的插件的。地址:http://babeljs.io/docs/plugins/

        例1:将es2015(es6)的箭头函数编译成es5

        (1) 安装 babel-plugin-transform-es2015-arrow-functions 插件:http://babeljs.io/docs/plugins/transform-es2015-arrow-functions/

 npm install --save-dev babel-plugin-transform-es2015-arrow-functions

        (2) 命令行执行编译

babel --plugins transform-es2015-arrow-functions script.js

        如果使用的插件太多的话,就显示过于繁琐了,babel 提供了 .babelrc 的文件:http://babeljs.io/docs/usage/babelrc/,可以用来配置编译的时候需要什么插件。

{
  "plugins": ["transform-es2015-arrow-functions","transform-es2015-classes"],
  "ignore": [
    "foo.js",
    "bar/**/*.js"
  ]
}

        babel预设:把相关的插件打包在一起,比如把跟es2015(es6)的插件打包在一起,es2015的预设:http://babeljs.io/docs/plugins/preset-es2015,如果想保持最新状态,想包含es2015、es2016、es2017 和 latest,可以使用 preset-env 预设:http://babeljs.io/docs/plugins/preset-env/

        安装 es2015 预设

npm install --save-dev babel-cli babel-preset-es2015

        .babelrc

{
    "presets":["es2015"]
}

        

        babel-loader

        把新一代语法编译成大多数浏览器能运行的es5语法。

        试用期前需要安装:babel-core babel-loader

npm install babel-core babel-loader --save-dev

        preset-env 预设:包含es2015、es2016、es2017 和 latest:http://babeljs.io/docs/plugins/preset-env/

{
    test:/\.js$/, // 匹配js结尾的文件
    exclude: /node_modules/,
    use:[
            {
                loader:'babel-loader', //需要npm下载对应的 "babel-core babel-loader --save-dev
                options:{
                    presets:['react','env'] //需要npm下载对应的 babel-preset-react
                }
            } //使用babel-loader还需要预设,也可以在项目的根目录中创建一个 .babelrc 文件并启用一些插件	
    ],
    exclude:[path.resolve(__dirname, 'node_modules')]
},


输出路劲处理

比如:filename:'../index.html', '../index.html'路劲是相对于output的path,本来index.html是打包在assets里面,由于../,因此被打包在dist目录下。name:'img/[name]_[hash:8].[ext]' 也是跟上面的意思相同。

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist/assets'),
        // filename: 'app.js'
        filename: 'js/app.js'
    },
    plugins:[
        new htmlWebpackPlugin({
            // '../index.html'路劲是相对于output的path,本来index.html是打包在assets里面,由于../,因此被打包在dist目录下。
            filename:'../index.html',//打包后新建文件的名字,默认是index.html
            template:'./src/index.html', //以index.html模板基础上再去创建
        }),
        new cleanWebpackPlugin(['dist'])
    ],
    module:{
        rules:[
            {
                test:/\.(jpg|gif|jpeg|gif|png)$/,
                use:[
                    {
                        loader:'url-loader',// 安装url-loader --save-dev
                            options:{
                                limit:10240, //大于10kb进行转码显示
                                name:'img/[name]_[hash:8].[ext]'
                            }
                    }
                ]
            },
            {
                test:/\.(ttf|otf|svg|eot|woff|woff2)$/,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'fonts/[name]_[hash:8].[ext]' //ext代表后缀名
                        }
	            }
                ]
            }
        ]
    }	
};

注意:此时打包后,要加载的资源文件路劲都有问题。


output中的 publicPath 和 use中的 publicPath

output中的 publicPath,在 npm run dev 打包的时候,资源路劲正常。

publicPath: 'assets/':所有资源的基础路劲,一定要以“/”结尾;

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist/assets'),
        filename: 'js/app.js',
        publicPath: 'assets/' // 所有资源的基础路劲,一定要以“/”结尾;给所有的资源路劲接上publicPathch的路劲,
    },
    plugins:[
        new htmlWebpackPlugin({
            // '../index.html'路劲是相对于output的path,本来index.html是打包在assets里面,由于../,因此被打包在dist目录下。
            filename:'../index.html',//打包后新建文件的名字,默认是index.html
            template:'./src/index.html', //以index.html模板基础上再去创建
        }),
        new cleanWebpackPlugin(['dist'])
    ],
    module:{
        rules:[
            {
                test:/\.(jpg|gif|jpeg|gif|png)$/,
                use:[
                    {
                        loader:'url-loader',// 安装url-loader --save-dev
                            options:{
                                limit:10240, //大于10kb进行转码显示
                                name:'img/[name]_[hash:8].[ext]'
                            }
                    }
                ]
            }
        ]
    }	
};


devServer中的 publicPath

但是启动热更新(webpack-dev-server)的时候,以上配置是的加载资源路劲都错误了。

运行 webpack-dev-server 的时候,资源也会被打包,只是放在内存里面。它会去两个地方去找对应的文件:1.首先去内存找打包好的内容;2.如果内存中没找到,就去本地目录找,可以设置devServer中的contentBase,来控制去哪里寻找本地资源。默认是当前的工作目录。

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist/'),
        // filename: 'app.js'
        filename: 'assets/js/app.js',
        publicPath: './' // 所有资源的基础路劲,一定要以“/”结尾;给所有的资源路劲接上publicPathch的路劲,
        /*
			1.有值:publicPathch的值+/js/app.js
			2.'': 直接为js/app.js
        */ 
    },
	plugins:[
		new htmlWebpackPlugin({
			// '../index.html'路劲是相对于output的path,本来index.html是打包在assets里面,由于../,因此被打包在dist目录下。
			filename:'index.html',//打包后新建文件的名字,默认是index.html
			template:'./src/index.html', //以index.html模板基础上再去创建

		}),
		new cleanWebpackPlugin(['dist'])
	],
	devServer:{
		open:true, //自动打开浏览器
		port:9898,
		// host:'192.168.1.136'
		contentBase:'./src/common',
		//服务器打包资源后的输出路劲
		publicPath: '/' // 默认是"/"
	},
	module:{
		rules:[
			{
				test:/\.scss$/,
				// use:['style-loader','css-loader','sass-loader']
				use: [ // 模块化设置
	                'style-loader' ,
	                {
	                    loader: 'css-loader',
	                    options: {
	                        module: true,
	                        localIdentName: '[local]'
	                    }
	                },
	                'sass-loader'
	            ],
	            exclude: [
	                path.resolve(__dirname, 'node_modules'),
	                path.resolve(__dirname, 'src/common')
	            ]
			},
			{
	            test: /\.scss$/,
	            use: [ 'style-loader', 'css-loader', 'sass-loader' ],
	            include: [
	                path.resolve(__dirname, 'node_modules'),
	                path.resolve(__dirname, 'src/common')
	            ]
	        },
			{
				test:/\.js$/, // 匹配js结尾的文件
				use:[
					{
						loader:'babel-loader', //需要npm下载对应的 "babel-core babel-loader --save-dev
						options:{
							presets:['react','env'] //需要npm下载对应的 babel-preset-react
						}
					} //使用babel-loader还需要预设,也可以在项目的根目录中创建一个 .babelrc 文件并启用一些插件	
				],
				exclude:[path.resolve(__dirname, 'node_modules')]
			},
			// 处理css文件出现的url,会自动帮你引入里面要引入的模块
			{
				test:/\.css$/,
				use:[
					'style-loader',
					{
						loader:'css-loader',
						options:{
							module:true // 默认是false,不开启模块化
						}
					}
				],
				exclude: [
					path.resolve(__dirname, 'node_modules'),
					path.resolve(__dirname, 'src/common'),
				]
			},
			{
				test:/\.css$/,
				use:['style-loader','css-loader'], // 执行顺序:先css-loader再style-loader; 整个rules是先从底部代码开始执行的。
				include: [
					path.resolve(__dirname, 'node_modules'),
					path.resolve(__dirname, 'src/common'),
				]
			},
			// file-loader:1、把你的资源移动到输出目录;2、返回最终引入资源的url。
			{
				test:/\.(jpg|gif|jpeg|gif|png)$/,
				use:[
					{
						loader:'url-loader',// 安装url-loader --save-dev
						options:{
							//outputPath: 'img/', // 图片会被打包在 dist/images 目录下
							limit:10240, //大于10kb进行转码显示
							name:'assets/img/[name]_[hash:8].[ext]'
						}
					}
				]
			},
			{
				test:/\.(ttf|otf|svg|eot|woff|woff2)$/,
				use:[
					{
						loader:'file-loader',
						options:{
							name:'assets/fonts/[name]_[hash:8].[ext]' //ext代表后缀名
						}
					}
				]
			}
		]
	}
};


标签: webpack
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码