实战

//——babel

//Babel 执行编译的过程中，会从项目根目 录下.babelre 文件中读取配置。 babelrc 是一个 JSON 格式的文件
npm i -D babel-plugin-tran sform-runtime
{
” plugins”:[ //使用哪些插件
[
” t ransform-runtime ” ,//减少冗余的代码
{” polyfill”: false }
] ,
]，
” presets”: [//要转换的源码使用了哪些新的语法特性，
[
” es 2015 ”,
{
” modules ”: false
}
]，
” stage-2 ”,
” react ”
]
]
}

//——typescript

npm i -D typescript awesome-typescript-loader
module: {
rules : [
{
test : /\ . ts$/ ,
loader :’awesome-typescript-loade r ’
}
]
}
//tsconfig.json
{
” compilerOptions”: {
” module ”:” commonj s”， ／／编译 出的代码采用的模块规
target ”：” esS ”， ／／编译出的代码采用 ES 的哪个版本
” sourceMap ”: true ／／输出 Sou rce Map 以方便调试
},
” exclude ”: ［／／不编译这些目录里的文件
” node_modules”
]
}

//——-sassloader

＃安装 Webpack Loader 依赖
npm i -D sass-loader css-loader style-loader
# sass-loader 依赖 node-sass
npm i -D node-sass

通过 sass-loader scss 源码转换为 css 代码，再将 css 代码交给 css-loader 理。
•
css-loader 会找出 css 代码中 import url （）这样的导入语句，告诉 Webpack
依赖这些资源 同时支持 CSS Modules 、压缩 css 等功能。处理完后再将结果交给
style-loader 处理
•
style-loader 会将 css 代码转换成字符串后，注入 JavaScript 代码中，通过 JavaS cript
DOM 增加样式 如果我们想将 css 代码提取到 个单独的文件中，而不是和
JavaScript 混在 起，则可以使用在 1.5 节中介绍过的 ExtractTextPlugin

//——postcss

//postcss.config.js 文件中读取所需的配置
npm i -D postcss-loader css-loader style-loader
npm i -D postcss-cssnext
module.exports = {
plugins: [
／／需要使用的插件列表
//postcss-cssnext ( http: //cssnext.io ）插件可以让我们使用下 css 法
require (’ postcss-cssnext ’)
]
}
test: /.css/ ,
use: [’ style-loader ’,’ css-loader ’,’p ostcss-loader ’],

//——为单页应用生成 HTML

//——多页面

css 类型的文件注入＜ ！一 STYLE －－＞所在的位置，如果＜！－－ STYLE －－＞不存
在，就注入 HTML HEAD 标签的最后
•
JavaScript 类型的文件注入 ！一 SCRIPT －－＞所在的位置，如果 ！一SCRIPT—
不存在，就注入 HTML BODY 标签的最后

//——NPM

发布到 Npm 仓库的模块有以下几个特点：
在每个模块根目录下都必须有一个描述该模块的 package.json 文件。该文件描述
了模块的入口文件是哪个，该模块又依赖哪些模块等。若想深入了解 ，则可以
阅读 package.json 文件（ http://javascript.ruanyifeng.com/nodej s/packagej son.html
•
模块中的文件以 JavaScript 文件为主 ，但不限于 JavaScript 文件 。例如一个 UI
组件可能同时需要 JavaScript css 、图片文件等。
•
模块中的代码大多采用模块化规范，因为我们的某个模块可能依赖其他模块，
而别的模块又可能依赖我们的这个模块。目前支持比较广泛的是 CommonJS
块化规范，上传到 Npm 仓库的代码最好遵守该规范。