webpack 搭建 react项目 （ 简易版）
webpack : 加载器（Loaders）的概念 pipeline
LESS文件先通过less-load处理成css，然后再通过css-loader加载成css模块，最后由style-loader加载器对其做最后的处理，从而运行时可以通过style标签将其应用到最终的浏览器环境。
webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often only one - to be loaded by the browser.
webpack.config.js : 主要有三部分组成 ：entry、output、module、
1、entry
The entry point tells webpack where to start and follows the graph of dependencies to know what to bundle.
2
3
4> module.exports = {
> entry: './path/to/my/entry/file.js'
> };
>
2、output
tells webpack how to treat bundled code.
2
3
4
5
6
7
8
9
10
11> var path = require('path')
> module.exports = {
> entry: './path/to/my/entry/file.js'
> output: {
> path: path.resolve(__dirname,'dist'),
> filename: '[name].js'
> chunkFilename:"[id].chunk.js" //affect output files for on-demand-loaded chunks
> publicPath:
> }
> }
>
3、Loaders
Identify which file or files should be transformed by a certain Loader. (
testproperty)Transform those files so that they can be added to your dependency graph (and eventually your bundle). (
useproperty)webpack treats every file (.css, .html, .scss, .jpg, etc.) as a module.
2
3
4
5
6
7
8
9
10
11
12
13
14> var path = require('path')
> module.exports = {
> entry: './path/to/my/entry/file.js'
> output: {
> path: path.resolve(__dirname,'dist'),
> filename: 'bundle.js'
> },
> module: {
> rules:[
> { test: '/\.txt$/', use: 'raw-loader' }
> ]
> }
> }
>
“Hey webpack compiler, when you come across a path that resolves to a ‘.txt’ file inside of a
require()/importstatement, use theraw-loaderto transform it before you add it to the bundle.”
There are three ways to use loaders in your application:
- Configuration (recommended): Specify them in your webpack.config.js file.
- Inline: Specify them explicitly in each
importstatement.- CLI: Specify them within a shell command.
4、Plugins
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23> const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
> const webpack = require('webpack'); //to access built-in plugins
> const path = require('path');
>
> const config = {
> entry: './path/to/my/entry/file.js',
> output: {
> path: path.resolve(__dirname, 'dist'),
> filename: 'my-first-webpack.bundle.js'
> },
> module: {
> rules: [
> { test: /\.txt$/, use: 'raw-loader' }
> ]
> },
> plugins: [
> new webpack.optimize.UglifyJsPlugin(),
> new HtmlWebpackPlugin({template: './src/index.html'})
> ]
> };
>
> module.exports = config;
>
serve the purpose of doing anything else that a loader cannot do.
Function.prototype.apply this method you can pass any function as plugin (
thiswill point to thecompiler). You can use this style to inline custom plugins in your configuration.
context : The base directory (absolute path!) for resolving the
entryoption. Ifoutput.pathinfois set, the included pathinfo is shortened to this directory. (Default : process.cwd())
Other Features of webpack-dev-server
WDS provides functionality beyond what was covered above. There are a couple of relevant fields that you should be aware of:
devServer.contentBase- Assuming you don’t generate index.html dynamically and prefer to maintain it yourself in a specific directory, you need to point WDS to it.contentBaseaccepts either a path (e.g.,'build') or an array of paths (e.g.,['build', 'images']). This defaults to the project root.devServer.proxy- If you are using multiple servers, you have to proxy WDS to them. The proxy setting accepts an object of proxy mappings (e.g.,{ '/api': 'http://localhost:3000/api' }) that resolve matching queries to another server. Proxy settings are disabled by default.devServer.headers- Attach custom headers to your requests here.