diff --git a/README.md b/README.md index 5284486..5a25363 100644 --- a/README.md +++ b/README.md @@ -6,22 +6,22 @@ React技术栈系列教程,涉及React、Redux、Babel、Webpack等相关技
- + - + - + - +
@@ -41,33 +41,51 @@ React技术栈系列教程,涉及React、Redux、Babel、Webpack等相关技 - Webpack 1. [使用Webpack加载ES6模块、ADM模块、CommonJS模块](https://github.com/iSpring/babel-webpack-react-redux-tutorials/tree/master/tutorials/load-commonjs-amd-es6-modules-with-webpack/README.md) - 2. [使用Webpack加载打包npm包](https://github.com/iSpring/babel-webpack-react-redux-tutorials/tree/master/tutorials/bundle-npm-packages-with-webpack/README.md) + 2. [使用Webpack加载打包NPM模块](https://github.com/iSpring/babel-webpack-react-redux-tutorials/tree/master/tutorials/bundle-npm-packages-with-webpack/README.md) 3. [使用Webpack加载CSS、SASS、LESS资源并集成PostCSS](https://github.com/iSpring/babel-webpack-react-redux-tutorials/blob/master/tutorials/load-css-with-webpack/README.md) - 4. 使用ExtractTextPlugin分离CSS - 5. 使用Webpack加载图片 - 6. Webpack Code Splitting - 7. Webpack Common Chunk - 8. HtmlWebpackPlugin - 9. Webpack Dev Server - 10. Webpack Source Maps - 11. Webpack vs Browserify + 4. [使用ExtractTextPlugin分离CSS以及文本文件](https://github.com/iSpring/babel-webpack-react-redux-tutorials/blob/master/tutorials/use-extract-text-webpack-plugin/README.md) + 5. [使用Webpack加载图片和SVG](https://github.com/iSpring/babel-webpack-react-redux-tutorials/blob/master/tutorials/load-image-with-webpack/README.md) + 6. [使用HtmlWebpackPlugin自动生成html文件](https://github.com/iSpring/babel-webpack-react-redux-tutorials/blob/master/tutorials/use-html-webpack-plugin/README.md) + 7. [在Webpack中使用环境变量](https://github.com/iSpring/babel-webpack-react-redux-tutorials/blob/master/tutorials/webpack-environment-variables/README.md) + 8. [Webpack中Chunk概念详解以及通过Webpack Code Splitting实现异步按需加载](https://github.com/iSpring/babel-webpack-react-redux-tutorials/tree/master/tutorials/webpack-code-splitting/README.md) + 9. 使用bundle-loader异步加载资源文件 + 10. 使用webpack-md5-hash + 11. Webpack中使用CommonsChunkPlugin + 12. Webpack Dev Server + 13. Webpack Source Maps - React - 1. React简介 - 2. JSX语法 - 3. React组件 - 4. React组件状态与生命周期 - 5. React组件事件 - 6. React组件ref + 1. JSX语法 + 2. React组件 + 3. React组件状态与生命周期 + 4. React组件事件和ref + 5. Conditional Rendering + 6. Lists and Keys + 7. 在React中使用classnames和CSS Module + 8. React Developer Tools + 9. Performance + 10. Context + 11. Animation + 12. PureRender + 13. Two-way Binding + 14. Test + +- react-router + 1. react-router使用基础 + 2. Route配置 + 3. history + 4. location对象以及路由切换时的参数传递 + 5. 通过Route向Component传递props + 6. 在react-router中使用代码分离实现动态路由 - Redux - 1. Redux简介 - 2. Redux使用基础 + 1. Redux使用基础 2. Redux中间件 3. Redux异步中间件 4. redux-combineReducers 5. react-redux-binding - 6. react-redux-binding - 7. 异步加载组件 + 6. 异步加载组件 + 7. Immutable.js + 8. Chrome Redux Plugin 未完待续... \ No newline at end of file diff --git a/tutorials/babel-basic-use/README.md b/tutorials/babel-basic-use/README.md index a8d9f17..37ddf2e 100644 --- a/tutorials/babel-basic-use/README.md +++ b/tutorials/babel-basic-use/README.md @@ -1,4 +1,10 @@ -Babel原名叫做`6to5`,顾名思义,它的使命就是把ES6的代码编译成ES5,使得我们可以使用ES6的新特性与语法编写代码。 +# [Babel使用基础](https://github.com/iSpring/babel-webpack-react-redux-tutorials/tree/master/tutorials/babel-basic-use/README.md) + +
+ +
+ +Babel原名叫做`6to5`,顾名思义,它的使命就是把ES6的代码编译成ES5,使得我们可以使用ES6的新特性与语法编写代码。 针对ES6的每一种新语法特性,Babel都提供了对应的插件以便将使用该语法的代码向下编译。比如ES6中新增了箭头函数语法,Babel提供了对应的插件[transform-es2015-arrow-functions](https://babeljs.io/docs/plugins/transform-es2015-arrow-functions/)Babel提供了几十种插件用以将ES6和ES7的诸多语法转换成ES5等语言。可以单独引入某几种插件使用,Babel还将多种插件组合成一组,形成一个`预设(preset)`,比如将ES2015相关的插件组合成了es2015这个预设,在使用的时候只需要引入es2015这个preset,就可以玩转ES2015所有的语法糖。 @@ -413,4 +419,4 @@ Babel官方提供了如下七种预设: ... -通过本文,我们应该掌握了使用Babel的基础知识。 \ No newline at end of file +通过本文,我们应该掌握了使用Babel的基础知识。 diff --git a/tutorials/babel-basic-use/images/Babel.png b/tutorials/babel-basic-use/images/Babel.png new file mode 100644 index 0000000..bd7a474 Binary files /dev/null and b/tutorials/babel-basic-use/images/Babel.png differ diff --git a/tutorials/babel-flow-type/README.md b/tutorials/babel-flow-type/README.md index 019e3ce..a8d626d 100644 --- a/tutorials/babel-flow-type/README.md +++ b/tutorials/babel-flow-type/README.md @@ -1,6 +1,8 @@ -

- -

+# [使用Flow进行静态类型检查](https://github.com/iSpring/babel-webpack-react-redux-tutorials/blob/master/tutorials/babel-flow-type/README.md) + +
+ +
JavaScript是一门动态语言,它不像Java或C#等静态语言那样在编译期就可以知道变量类型。JavaScript是解释执行的,浏览器或Node.js在运行到某一行代码的时候才能确定该变量的具体类型。JavaScript动态语言的特性使得开发者可以灵活使用该语言,但是也使得构建大型Web应用更加困难,因为我们要确保传递的实参的类型与函数签名中形参的类型相一致。这种问题很难单纯靠开发者Code Review解决,为此Facebook开源了[Flow](https://flowtype.org/),用于对JavaScript进行静态类型检查。 @@ -52,7 +54,7 @@ npm install --save-dev flow-bin 然后我们在根目录下运行`npm run flow`,输出错误如下:

- +

Flow判断出上面`fool(x)`期待的形参x是`number`类型,但是实际传入的确实`string`类型,因此报错。 @@ -80,7 +82,7 @@ Flow允许我们像静态语言那样显式地指定变量的类型,修改`exa 执行`npm run flow`,输出错误如下:

- +

这是因为`return x.length * y`返回的实际值类型应该是`number`,而`function foo(): string`却声明返回的是`string`类型,所以报错。此处将方法签名改为`function foo(x: string, y: number): number`即可。 @@ -164,7 +166,7 @@ total([1, 2, 3, 'Hello']); 执行`npm run flow`,输出错误如下:

- +

我们将`total(numbers)`方法中的numbers形参声明为Array,表示numbers是一个数字数组,但是实际传入的实参[1, 2, 3, 'Hello']中包含字符串`Hello`,所以报错。 @@ -380,4 +382,4 @@ square(50); /node_modules /buildOutput ``` -至此,我们就完美地将Flow与Babel结合在一起使用了。 \ No newline at end of file +至此,我们就完美地将Flow与Babel结合在一起使用了。 diff --git a/tutorials/build-tools-comparison/package.json b/tutorials/build-tools-comparison/package.json new file mode 100644 index 0000000..26d519d --- /dev/null +++ b/tutorials/build-tools-comparison/package.json @@ -0,0 +1,16 @@ +{ + "name": "build-tools-comparison", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "reference": [ + "https://survivejs.com/webpack/appendices/comparison/", + "https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/", + "http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html" + ] +} diff --git a/tutorials/bundle-npm-packages-with-webpack/README.md b/tutorials/bundle-npm-packages-with-webpack/README.md index 37fa6f3..1f185d0 100644 --- a/tutorials/bundle-npm-packages-with-webpack/README.md +++ b/tutorials/bundle-npm-packages-with-webpack/README.md @@ -1,5 +1,7 @@ +# [使用Webpack加载打包NPM模块](https://github.com/iSpring/babel-webpack-react-redux-tutorials/tree/master/tutorials/bundle-npm-packages-with-webpack/README.md) +

- +

我们在[《使用Webpack加载ES6模块、ADM模块、CommonJS模块》](https://github.com/iSpring/babel-webpack-react-redux-tutorials/tree/master/tutorials/load-commonjs-amd-es6-modules-with-webpack)一文中学习了如何使用Webpack打包各种CommonJS模块、AMD模块以及ES6模块,我们在示例代码中演示的各种模块都是我们自己编写的。在实际项目中,我们需要依赖很多npm包,并且需要将这些npm模块通过Webpack打包到我们最终的输出文件中。 diff --git a/tutorials/load-commonjs-amd-es6-modules-with-webpack/README.md b/tutorials/load-commonjs-amd-es6-modules-with-webpack/README.md index 5e48beb..ae67b12 100644 --- a/tutorials/load-commonjs-amd-es6-modules-with-webpack/README.md +++ b/tutorials/load-commonjs-amd-es6-modules-with-webpack/README.md @@ -1,8 +1,10 @@ -

- +# [使用Webpack加载ES6模块、ADM模块、CommonJS模块](https://github.com/iSpring/babel-webpack-react-redux-tutorials/tree/master/tutorials/load-commonjs-amd-es6-modules-with-webpack/README.md) + +

+

-## [Webpack](https://webpack.github.io/) +## Webpack A Bundler for JavaScript and Friends 现在前端项目越来越庞大,JavaScript、CSS文件、图片、JSON等各种文件杂乱堆砌,在前端我们可能需要不同的方式来加载不同的资源文件,比如通过创建` + + +``` + +`index.css`文件如下所示: +``` +#star { + width: 48px; + height: 48px; + background: url(images/star.png) no-repeat center; +} + +img { + display: block; + max-width: 250px; +} +``` + +我们在`index.css`中设置了`#star`的背景是`star.png`。 + +`index.js`文件如下所示: +``` +import "./index.css"; + +import githubPng from "./images/github.png";// <=> const github = require("./images/github.png"); +import webpackPng from "./images/webpack.png";// <=> const webpack = require("./images/webpack.png"); +import npmSvg from "./images/npm.svg";// <=> const npmSvg = require("./images/npm.svg"); + +const img1 = document.createElement("img"); +img1.src = githubPng; +document.body.appendChild(img1); +console.log(githubPng); + +const img2 = document.createElement("img"); +img2.src = webpackPng; +document.body.appendChild(img2); +console.log(webpackPng); + +const img3 = document.createElement("img"); +img3.src = npmSvg; +document.body.appendChild(img3); +console.log(npmSvg); +``` + +我们在`index.js`中通过`import`(或`require()`)加载了`github.png`、`webpack.png`和`npm.svg`,根据这些资源创建了相应的DOM,并输出了资源的路径。 + +## [file-loader](https://github.com/webpack-contrib/file-loader) + +为了能够在Webpack中使用这些图片资源文件,我们需要使用[file-loader](https://github.com/webpack-contrib/file-loader)。**`file-loader`的作用不是把图片等文件打包到一个JavaScript文件中,而是通过`file-loader`方便地获得要使用的图片等资源的URL。** + +首先我们要安装`file-loader`: +``` +npm install --save-dev file-loader +``` + +`webpack.config.js`配置如下所示: +``` +var path = require("path"); + +var buildFolder = "buildOutput"; + +module.exports = { + entry: "./index.js", + + output: { + path: path.join(__dirname, buildFolder), + filename: "bundle.js" + }, + + module: { + loaders: [{ + test: /\.js$/, + loader: 'babel-loader' + }, { + test: /\.(jpg|jpeg|png|svg)$/, + loader: 'file-loader' + }, { + test: /\.css$/, + loader: 'style!css' + }] + } +}; +``` + +对于图片和SVG文件,我们需要使用`file-loader`进行加载。 + +运行`npm start`进行打包,在`buildOutput`目录下输出结果如下所示: + +
+ +
+ +我们可以看到,图片和SVG的文件名变成了hash值,默认情况下,`file-loader`使用文件的hash值作为文件名。需要注意的是,这些图片文件没有打包到`bundle.js`中。`file-loader`的作用不是把图片等文件打包到一个JavaScript文件中,而是通过`file-loader`方便地获得要使用的图片等资源的URL。 + +我们双击打开`index.html`文件,发现界面上没有显示任何图片,图片加载不成功肯定是URL路径不对。我们在`index.js`中将这几个图片和SVG的路径进行了输出,我们打开控制台,输出如下: +
+ +
+ +`index.html`和`buildOutput`目录之间的相对位置如下所示: +``` +Project + | + |--index.html + |--buildOutput + |--30b63bc34b872b05319d23070d29ff31.png + |--0714810ae3fb211173e2964249507195.png + |--ab8d3852300ee8fce6ce89d0a1b2a362.svg + |--009911f7665c7be361e829ea741b70eb.png + +``` + +由此可见,在运行时,`index.html`中使用了错误的URL路径,应该将路径改为`buildOutput/30b63bc34b872b05319d23070d29ff31.png`等。 + +为了解决URL路径问题,我们修改`webpack.config.js`,为`output`节点配置[publicPath](https://github.com/webpack/docs/wiki/configuration#outputpublicpath)属性,配置如下: +``` +var path = require("path"); + +var buildFolder = "buildOutput"; + +module.exports = { + entry: "./index.js", + + output: { + path: path.join(__dirname, buildFolder), + filename: "bundle.js", + publicPath: buildFolder + "/" + }, + + module: { + loaders: [{ + test: /\.js$/, + loader: 'babel-loader' + }, { + test: /\.(jpg|jpeg|png|svg)$/, + loader: 'file-loader' + }, { + test: /\.css$/, + loader: 'style!css' + }] + } +}; +``` + +我们为配置了`output.publicPath`的值为`buildFolder + "/"`,我们执行`npm start`再次执行打包,刷新`index.html`页面,这次控制台输出如下所示: +
+ +
+ +这次URL输出路径是正确的,界面也能正确显示所有的图片,如下所示: +
+ +
+ +## [url-loader](https://github.com/webpack-contrib/url-loader) + +我们之前提到`file-loader`不能将文件打包到JavaScript的输出文件中,我们想把一些比较小的图片打包到`bundle.js`中,这时我们可以使用[url-loader](https://github.com/webpack-contrib/url-loader)。 + +我们安装`url-loader`: +``` +npm install --save-dev url-loader +``` + +我们可以把`url-loader`看做是`file-loader`的升级版,`url-loader`除了可以方便地获取图片等资源的URL路径,还可以选择性地将图片等资源打包到输出的JavaScript文件中,这样可以减少小文件的请求数量。`url-loader`依赖`file-loader`,在使用`url-loader`时,请确保已安装了`file-loader`。 + +我们修改`webpack.config.js`,如下所示: +``` +var path = require("path"); + +var buildFolder = "buildOutput"; + +module.exports = { + entry: "./index.js", + + output: { + path: path.join(__dirname, buildFolder), + filename: "bundle.js", + publicPath: buildFolder + "/" + }, + + module: { + loaders: [{ + test: /\.js$/, + loader: 'babel-loader' + }, { + test: /\.(jpg|jpeg|png|svg)$/, + loader: 'url-loader', //url-loader?limit=10000 + query: { + limit: 10 * 1024 //10KB + } + }, { + test: /\.css$/, + loader: 'style!css' + }] + } +}; +``` + +我们用`url-loader`替换了`file-loader`,并且通过 +``` +query: { + limit: 10 * 1024 //10KB +} +``` +为`url-loader`配置了`limit`参数为10KB,也可以通过`url-loader?limit=10000`的形式为其指定`limit`等参数。如果不配置`limit`参数,那么`url-loader`会将`index.js`中用到的所有图片和资源打包到`buildOutput/bundle.js`中。我们此处配置`limit`参数为10KB,`url-loader`只会将10KB以下的图片等资源打包到`buildOutput/bundle.js`中,超过10KB的图片只是拷贝到`buildOutput`目录下(当然,文件名会改成hash)。 + +重新执行`npm start`进行打包,在`buildOutput`目录下输出结果如下所示: + +
+ +
+ +`github.png`、`star.png`、`npm.svg`都小于10KB,这三个文件被打包到了`buildOutput/bundle.js`中,而`webpack.png`大于10KB,所以没有被打包到`buildOutput/bundle.js`中。 + +刷新`index.html`页面,依然能正确显示图片,控制台输出如下: +
+ +
+ +由此可以看出,`github.png`和`npm.svg`已经被打包成了base64字符串存储在`bundle.js`中了。 diff --git a/tutorials/load-image-with-webpack/images/UI.png b/tutorials/load-image-with-webpack/images/UI.png new file mode 100644 index 0000000..61f3254 Binary files /dev/null and b/tutorials/load-image-with-webpack/images/UI.png differ diff --git a/tutorials/load-image-with-webpack/images/output.png b/tutorials/load-image-with-webpack/images/output.png new file mode 100644 index 0000000..c87c1b7 Binary files /dev/null and b/tutorials/load-image-with-webpack/images/output.png differ diff --git a/tutorials/load-image-with-webpack/images/output2.png b/tutorials/load-image-with-webpack/images/output2.png new file mode 100644 index 0000000..7345e87 Binary files /dev/null and b/tutorials/load-image-with-webpack/images/output2.png differ diff --git a/tutorials/load-image-with-webpack/images/url1.png b/tutorials/load-image-with-webpack/images/url1.png new file mode 100644 index 0000000..d76d78d Binary files /dev/null and b/tutorials/load-image-with-webpack/images/url1.png differ diff --git a/tutorials/load-image-with-webpack/images/url2.png b/tutorials/load-image-with-webpack/images/url2.png new file mode 100644 index 0000000..f8afb25 Binary files /dev/null and b/tutorials/load-image-with-webpack/images/url2.png differ diff --git a/tutorials/load-image-with-webpack/images/url3.png b/tutorials/load-image-with-webpack/images/url3.png new file mode 100644 index 0000000..c7c4f59 Binary files /dev/null and b/tutorials/load-image-with-webpack/images/url3.png differ diff --git a/tutorials/load-image-with-webpack/images/webpack.svg b/tutorials/load-image-with-webpack/images/webpack.svg deleted file mode 100644 index 4f34cfc..0000000 --- a/tutorials/load-image-with-webpack/images/webpack.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/tutorials/load-image-with-webpack/images/what-is-webpack.png b/tutorials/load-image-with-webpack/images/what-is-webpack.png deleted file mode 100644 index 146e5d4..0000000 Binary files a/tutorials/load-image-with-webpack/images/what-is-webpack.png and /dev/null differ diff --git a/tutorials/load-image-with-webpack/index.js b/tutorials/load-image-with-webpack/index.js index 3aa2159..f5fea1e 100644 --- a/tutorials/load-image-with-webpack/index.js +++ b/tutorials/load-image-with-webpack/index.js @@ -1,22 +1,19 @@ import "./index.css"; -import githubPng from "./images/github.png"; -import webpackPng from "./images/webpack.png"; -import npmSvg from "./images/npm.svg"; +import githubPng from "./images/github.png";// <=> const github = require("./images/github.png"); +import webpackPng from "./images/webpack.png";// <=> const webpack = require("./images/webpack.png"); +import npmSvg from "./images/npm.svg";// <=> const npmSvg = require("./images/npm.svg"); -// const github = require("./images/github.png"); const img1 = document.createElement("img"); img1.src = githubPng; document.body.appendChild(img1); console.log(githubPng); -// const webpack = require("./images/webpack.png"); const img2 = document.createElement("img"); img2.src = webpackPng; document.body.appendChild(img2); console.log(webpackPng); -// const npmSvg = require("./images/npm.svg"); const img3 = document.createElement("img"); img3.src = npmSvg; document.body.appendChild(img3); diff --git a/tutorials/load-image-with-webpack/package.json b/tutorials/load-image-with-webpack/package.json index d974a70..34efff3 100644 --- a/tutorials/load-image-with-webpack/package.json +++ b/tutorials/load-image-with-webpack/package.json @@ -24,8 +24,8 @@ }, "reference": [ "https://survivejs.com/webpack/loading/images/", - "https://github.com/webpack-contrib/url-loader", "https://github.com/webpack-contrib/file-loader", + "https://github.com/webpack-contrib/url-loader", "http://tomasalabes.me/blog/_site/web-development/2016/12/10/Webpack-and-the-public-path.html", "https://stackoverflow.com/questions/28846814/what-does-publicpath-in-webpack-do" ] diff --git a/tutorials/load-image-with-webpack/webpack.config.js b/tutorials/load-image-with-webpack/webpack.config.js index 5847baa..27c5721 100644 --- a/tutorials/load-image-with-webpack/webpack.config.js +++ b/tutorials/load-image-with-webpack/webpack.config.js @@ -1,6 +1,6 @@ -var path = require("path"); +// var path = require("path"); -var buildFolder = "buildOutput"; +// var buildFolder = "buildOutput"; // module.exports = { // entry: "./index.js", @@ -16,7 +16,7 @@ var buildFolder = "buildOutput"; // test: /\.js$/, // loader: 'babel-loader' // }, { -// test: /\.(jpg|jpeg|png)$/, +// test: /\.(jpg|jpeg|png|svg)$/, // loader: 'file-loader' // }, { // test: /\.css$/, @@ -25,6 +25,10 @@ var buildFolder = "buildOutput"; // } // }; +var path = require("path"); + +var buildFolder = "buildOutput"; + module.exports = { entry: "./index.js", diff --git a/tutorials/react-github/.gitignore b/tutorials/react-router-basic-use/.gitignore similarity index 100% rename from tutorials/react-github/.gitignore rename to tutorials/react-router-basic-use/.gitignore diff --git a/tutorials/react-router-basic-use/package.json b/tutorials/react-router-basic-use/package.json new file mode 100644 index 0000000..f12e37e --- /dev/null +++ b/tutorials/react-router-basic-use/package.json @@ -0,0 +1,15 @@ +{ + "name": "react-router-basic-use", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "reference": [ + "https://github.com/ReactTraining/react-router/blob/v3/docs/Introduction.md", + "https://github.com/ReactTraining/react-router/blob/v3/docs/guides/RouteConfiguration.md" + ] +} diff --git a/tutorials/react-stack-mission/README.md b/tutorials/react-stack-mission/README.md index d6af672..9351290 100644 --- a/tutorials/react-stack-mission/README.md +++ b/tutorials/react-stack-mission/README.md @@ -1,3 +1,4 @@ +# [React技术栈的使命](https://github.com/iSpring/babel-webpack-react-redux-tutorials/blob/master/tutorials/react-stack-mission/README.md) 本文将介绍React相关的技术栈,以及各个技术相应的使命。 ## [React](https://facebook.github.io/react/) diff --git a/tutorials/use-babel-polyfill/README.md b/tutorials/use-babel-polyfill/README.md index 09d8b46..eef789c 100644 --- a/tutorials/use-babel-polyfill/README.md +++ b/tutorials/use-babel-polyfill/README.md @@ -1,5 +1,5 @@ - -## [babel-polyfill](http://babeljs.io/docs/usage/polyfill/) +# [babel-polyfill](https://github.com/iSpring/babel-webpack-react-redux-tutorials/blob/master/tutorials/use-babel-polyfill/README.md) + 我们之前一直强调ES6增加了新的语法特性,其实这种说法不严谨。严格来说,ES6相比于ES5新增了如下内容: - 新的语法特性,比如箭头函数、解构等 @@ -10,13 +10,13 @@ 默认情况下,Babel只会对ES6中的语法特性进行编译,而不会对新增的API方法以及新的全局对象进行处理。比如我们使用了ES6的`Object.assign()`方法或`Promise`类,这样默认情况下Babel编译出的代码会在不支持这两个特性的浏览器中会出现问题。为了解决这个问题,我们可以使用babel-polyfill。 -首先通过npm引入[babel-polyfill](): +首先通过npm引入[babel-polyfill](http://babeljs.io/docs/usage/polyfill/): ``` npm install --save babel-polyfill ``` -babel-polyfill可以模拟完整的ES6中的API环境,弥补缺失的API方法和全局对象。需要注意的是,在生产环境中,我们的项目是需要将babel-polyfill中的代码一起打包到最终发布的产品中的,所以通过npm安装的时候应该使用`--save`,而不是`--save-dev`等。 +babel-polyfill可以模拟完整的ES6中的API环境,弥补缺失的API方法和全局对象。需要注意的是,在生产环境中,我们的项目是需要将babel-polyfill中的代码一起打包到最终发布的产品中的,所以通过npm安装的时候应该使用`--save`,而不是`--save-dev`。 我们在源码文件的首行引入babel-polyfill: ``` @@ -33,4 +33,4 @@ module.exports = { }; ``` -这样Webpack就会将babel-polyfill打包到我们的产品代码中。关于Webpack我们会在后面的教程中详细介绍。 \ No newline at end of file +这样Webpack就会将babel-polyfill打包到我们的产品代码中。关于Webpack我们会在后面的教程中详细介绍。 diff --git a/tutorials/use-extract-text-webpack-plugin/README.md b/tutorials/use-extract-text-webpack-plugin/README.md index 6a6ae52..f8bbb95 100644 --- a/tutorials/use-extract-text-webpack-plugin/README.md +++ b/tutorials/use-extract-text-webpack-plugin/README.md @@ -1,16 +1,19 @@ -
- - +# [使用ExtractTextPlugin分离CSS以及文本文件](https://github.com/iSpring/babel-webpack-react-redux-tutorials/blob/master/tutorials/use-extract-text-webpack-plugin/README.md) + +
+ +
-# 使用ExtractTextWebpackPlugin分离CSS -我们在上一篇[《使用Webpack和PostCSS加载CSS、SASS、LESS资源》](https://github.com/iSpring/babel-webpack-react-redux-tutorials/blob/master/tutorials/load-css-with-webpack/README.md)中介绍了如何使用Webpack加载CSS、SASS、LESS等相关资源以及如何将PostCSS整合进入Webpack构建过程,在那篇课程中我们将CSS相关资源打包成了一个JavaScript文件。 +我们在上一篇[《使用Webpack加载CSS、SASS、LESS资源并集成PostCSS》](https://github.com/iSpring/babel-webpack-react-redux-tutorials/blob/master/tutorials/load-css-with-webpack/README.md)中介绍了如何使用Webpack加载CSS、SASS、LESS等相关资源以及如何将PostCSS整合进入Webpack构建过程,在那篇课程中我们将CSS相关资源打包成了一个JavaScript文件`css.bundle.js`。 将多个CSS文件打包成一个JavaScript文件存在如下问题: - 1. + 1. 生成的`css.bundle.js`文件中存储了CSS字符串,在html页面中需要用用` + + +``` + +## 使用ExtractTextPlugin分离txt文本文件 + +我们还可以使用ExtractTextPlugin分离txt等其他文本文件。 + +我们在`txt`目录下包含`e.txt`和`f.txt`两个文本文件。 +`e.txt`内容如下: +``` +这是第一个文本文件的内容。 +``` + +`f.txt`内容如下: +``` +这是第二个文本文件的内容。 +``` + +我们在`index.js`中也加载这两个文件,如下所示: +``` +import './css/a.css'; +import './css/b.scss'; +import './css/c.less'; +import './css/d.css'; + +import './txt/e.txt'; +import './txt/f.txt'; + +console.log("index.js"); +``` + +txt等文本文件的加载需要使用[raw-loader](https://github.com/webpack-contrib/raw-loader),它可以将读取文件的原始内容。 + +我们需要安装`raw-loader`: +``` +npm install --save-dev raw-loader +``` + +然后要在`webpack.config.js`添加配置,对`.txt`文件使用`raw-loader`进行加载: +``` +{ + test: /\.txt$/, + loader: "raw" +} +``` + +为了能够使插件`ExtractTextPlugin`同时分离CSS相关文件以及txt文本文件,我们需要对`webpack.config.js`进行修改,如下所示: +``` +var path = require("path"); + +var ExtractTextWebpackPlugin = require("extract-text-webpack-plugin"); + +var extractCSS = new ExtractTextWebpackPlugin("bundle.css"); + +var extractTXT = new ExtractTextWebpackPlugin("bundle.txt"); + +module.exports = { + entry: "./index.js", + output: { + path: path.join(__dirname, "buildOutput"), + filename: "bundle.js" + }, + + module: { + loaders: [{ + test: /\.js$/, + loader: "babel" + }, { + test: /\.css$/, + loader: extractCSS.extract("css!postcss") + }, { + test: /\.scss$/, + loader: extractCSS.extract("css!postcss!sass") + }, { + test: /\.less$/, + loader: extractCSS.extract("css!postcss!less") + }, { + test: /\.txt$/, + loader: extractTXT.extract("raw") + }] + }, + + plugins: [ + extractCSS, + extractTXT + ] +}; +``` + +1. 我们在`extractCSS`实例的基础上,又通过`var extractTXT = new ExtractTextWebpackPlugin("bundle.txt");`实例化了`extractTXT`这个ExtractTextWebpackPlugin实例,其输出文件为`bundle.txt`。`extractCSS`用于分离CSS相关文件,`extractTXT`用于分离txt文本文件。 + +2. 对于CSS、SASS、LESS文件,我们将`ExtractTextWebpackPlugin.extract()`替换成`extractCSS.extract()`,使用插件实例的`extract()`方法,而不是使用`ExtractTextWebpackPlugin`的全局`extract()`方法。 + +3. 对于文件文件,使用`extractTXT.extract("raw")`进行分离。 + +4. 将`extractCSS`和`extractTXT`这两个插件实例都添加到`plugins`数组中。 + +执行`npm install`进行打包,输出结果有三个文件:`buildOutput/bundle.js`、`buildOutput/bundle.css`和`buildOutput/bundle.txt`。新增的``buildOutput/bundle.txt``包含了`txt/e.txt`和`txt/f.txt`文件的内容。 + +我们修改`index.html`,向其中添加一个`