webpack 先这么用

拈花ヽ惹草 提交于 2020-03-01 15:02:03

webpack

输入图片说明

介绍 Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源; 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等

安装

// 全局安装
npm install webpack -g
// 进入项目,安装到项目依赖中
npm init
npm install webpack --save-dev

配置文件

每个项目下都必须配置有一个 webpack.config.js ,它的作用如同常规的 gulpfile.js/Gruntfile.js,作为配置项告诉 webpack 如何工作。

默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件

例子:

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

Loader

Loader 用于预处理文件

使用方式

  • 通过 require 指定
  • webpack.config.js 中配置
  • 命令行执行

插件 Plugins

通过插件可以添加特定功能

  • 内嵌插件
  • 第三方插件

DefinePlugin

内嵌插件,无需安装

用于在编译期间定义常量

使用

例子:

new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify("5fa3b9"),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: "1+1",
    "typeof window": JSON.stringify("object")
})

copy-webpack-plugin

拷贝资源插件

官方这样解释 Copy files and directories in webpack ,在 webpack 中拷贝文件和文件夹

https://github.com/kevlened/copy-webpack-plugin

安装
npm install --save-dev copy-webpack-plugin
使用

new CopyWebpackPlugin([patterns], options)

web pack.config.js 中添加:

var CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
	 plugins: [
	 	...
	 	 new CopyWebpackPlugin([{
            from: __dirname + '/src/index.html',
            to: __dirname + '/dist'
        }]),
	 	...
	 ]
}
配置项

clean-webpack-plugin

删除编译资源

在编译前,删除之前编译结果目录或文件

https://github.com/johnagan/clean-webpack-plugin

安装
npm install clean-webpack-plugin --save-dev
使用

web pack.config.js 中添加:

var CleanPlugin = require("clean-webpack-plugin");

module.exports = {
	...
	 plugins: [
	 	...
	 		new CleanPlugin(['dist', 'build']),
	 	...
	 ]
	...
}

distbuild 为需要删除资源

html-webpack-plugin

自动生成html插件 生成 HTML5 文件并注入 webpack 绑定的一系列 js & css,生成对应 <script><link> 标签 https://github.com/ampedandwired/html-webpack-plugin

安装
npm install html-webpack-plugin --save-dev
使用

web pack.config.js 中添加:

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

module.exports = {

	...

	 plugins: [

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

	 ]

	...

}

配置项

filename: 生成文件名称,默认 index.html

template: 模版文件目录及名称

注意

此插件会受到 file-loader 的影响

编译 ES6

安装 loaders

安装 babel-loader

npm install babel-loader --save-dev

安装转码规则

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

webpack.config.js 文件添加以下内容

......
    module: {
        loaders: [
            ...

            { test: /\.jsx?$/,loader: 'babel-loader', query: {presets: ['es2015']}}

        ]
    },
    resolve:{
        extensions:['','.js','.jsx']
    },

......

扩展工具

atool-build

基于 webpack 构建封装 集成了一些常用的 loaders 与 plugins

安装

npm i atool-build -g

参考

http://webpack.github.io/
http://ant-tool.github.io/

Fabs

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!