We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
开始之前安装好node、webpack。下面简单记录了手动配置webpack项目的过程。
新建一个项目文件夹webpack-basic并初始化package.json文件
webpack-basic
package.json
mkdir webpack-basic cd webpack-basic npm init
生成的package.json详细内容如下:
{ "name": "webpack-basic", "version": "1.0.0", "description": "A simple configuration of webpack", "main": "index.js", "dependencies": { "webpack": "^3.8.1" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "MIT" }
如果之前没有安装webpack，运行下面的命令：安装webpack并加入项目依赖：
$ npm install --save-dev webpack
新建webpack.config.js
webpack.config.js
module.exports = { entry: './index.js', output: { filename: 'bundle.js' } };
这是最简单的webpack配置。
entry
output
bundle.js
编写好index.js。到这里就可以试试webpack是否好使，在终端运行命令：
index.js
$ webpack
指定入口文件后，webpack将自动识别项目所依赖的其它文件，构建一个依赖关系图。看到打包生成的bundle.js文件，好啦，webpack已经正常工作。
如果想将打包的文件输出到指定目录，可以配置output.path：
output.path
output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }
在文件开头引入path:
const path = require('path');
重新打包会看到新生成了的bundle.js文件放置在dist文件夹下。
dist
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件（如.css、.html、.jpg等），就需要使用 Loader进行转换。可以将Loader看成是模块和资源的转换器，在文件被添加到依赖图中时，将其转换为模块。
需要处理js文件以外的其它类型文件时，就需要使用loader 进行转换。它本身是一个函数，将源文件作为参数传入，返回转换后的结果。 以css文件为例，： 1. 安装Loader
npm install --save-dev css-loader
2. 配置module.rules
module: { rules: [{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }] },
包含两个必要属性:
css-loader 解释)@import 和 url() ，会 import/require() 后再解析它们。更多
插件（Plugins）用来拓展Webpack功能，它们会在整个构建过程中生效，执行相关的任务。
使用某个插件的步骤，以HtmlWebpackPugin插件为例：
1. 首先通过npm安装，并加入项目依赖
$ npm install --save-dev html-webpack-plugin
2. 然后在webpack.config.js中配置中的plugins，添加该插件的一个实例
plugins
plugins: [ new HtmlWebpackPlugin() ]
plugins是一个数组，可以配置多个插件。 HtmlWebpackPlugin插件用于生成HTML文件。执行webpack命令，会在dist文件夹下生成一个index.html文件，内容如下：
webpack
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack App</title> </head> <body> <script type="text/javascript" src="bundle.js"></script></body> </html>
可以看到，插件已经自动将webpack打包好的js文件引入body中。
如果有多个webpack入口点，所有的都会在生成的HTML文件中的script标签内。如果有任何CSS assets 在webpack的输出中（例如，利用ExtractTextPlugin提取CSS），那么这些将被包含在HTML head中的标签内。
这个插件非常有用！此外还有很多非常棒的插件，看具体的需求配置使用。更多
The text was updated successfully, but these errors were encountered:
No branches or pull requests
开始之前安装好node、webpack。下面简单记录了手动配置webpack项目的过程。
一、开始
创建并初始化一个项目
新建一个项目文件夹
webpack-basic并初始化package.json文件生成的
package.json详细内容如下:如果之前没有安装webpack，运行下面的命令：安装webpack并加入项目依赖：
webpack配置文件
新建
webpack.config.js这是最简单的webpack配置。
entry配置入口文件，告诉webpack从哪儿开始，可以看做是根上下文或app的第一个启动文件。output配置输出信息，包括输出目录、输出文件名等，上面只是简单配置了输出的文件为bundle.js。启动webpack打包
编写好
index.js。到这里就可以试试webpack是否好使，在终端运行命令：指定入口文件后，webpack将自动识别项目所依赖的其它文件，构建一个依赖关系图。看到打包生成的
bundle.js文件，好啦，webpack已经正常工作。如果想将打包的文件输出到指定目录，可以配置
output.path：在文件开头引入path:
重新打包会看到新生成了的
bundle.js文件放置在dist文件夹下。二、配置Loader
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件（如.css、.html、.jpg等），就需要使用 Loader进行转换。可以将Loader看成是模块和资源的转换器，在文件被添加到依赖图中时，将其转换为模块。
什么时候用Loader？
需要处理js文件以外的其它类型文件时，就需要使用loader 进行转换。它本身是一个函数，将源文件作为参数传入，返回转换后的结果。
以css文件为例，：
1. 安装Loader
2. 配置module.rules
包含两个必要属性:
css-loader 解释)@import 和 url() ，会 import/require() 后再解析它们。更多
三、配置插件
插件（Plugins）用来拓展Webpack功能，它们会在整个构建过程中生效，执行相关的任务。
如何使用插件？
使用某个插件的步骤，以HtmlWebpackPugin插件为例：
1. 首先通过npm安装，并加入项目依赖
2. 然后在
webpack.config.js中配置中的plugins，添加该插件的一个实例plugins是一个数组，可以配置多个插件。
HtmlWebpackPlugin插件用于生成HTML文件。执行
webpack命令，会在dist文件夹下生成一个index.html文件，内容如下：可以看到，插件已经自动将webpack打包好的js文件引入body中。
这个插件非常有用！此外还有很多非常棒的插件，看具体的需求配置使用。更多
The text was updated successfully, but these errors were encountered: