【4858美高梅】入门教程,用法教程

By admin in 4858美高梅 on 2019年4月5日

一)从格局上看,CSS Modules
是将CSS中的选拔器转换为变量,然后在DOM中引用变量来引进样式。

本文写于 Webpack 2 正经发布以前(完善文书档案阶段),不仅是 Webpack 二的入门教程,也介绍了 Webpack 是何许。
原稿地址:Getting Started with Webpack
2
原来的文章小编:Drew
Powers
译者:linpu.li

CSS Modules 用法教程

2016/06/19 · CSS ·
Modules

初稿出处:
阮一峰   

学过网页开发就会清楚,CSS 不能够算编制程序语言,只是网页样式的壹种描述方法。

为了让 CSS
也能适用软件工程措施,程序员想了各个方法,让它变得像一门编制程序语言。从最早的Less、SASS,到新兴的
PostCSS,再到近日的 CSS in JS,都以为了解决这么些题材。

4858美高梅 1

本文介绍的 CSS Modules
有所分裂。它不是将 CSS
改造成编制程序语言,而是功能很单纯,只进入了有个别成效域和模块信赖,那正好是网页组件最必要的作用。

因而,CSS Modules
很简单学,因为它的条条框框少,同时又相当有用,能够有限支撑某些组件的体裁,不会潜移默化到其余零件。

4858美高梅 2

先是伊始化

二)从效益上看,CSS Modules
能够将CSS选用器名字转成随机字符串,保障选择器同名也不会争辩。

Webpack 2将在其文书档案完结之后正式宣布。但那并不代表不可能初阶选取它,就算您驾驭怎么布局的话。

零、示例库

自己为这些课程写了一个示例库,包涵四个德姆o。通过它们,你能够轻松学会CSS
Modules。

率先,克隆示例库。

JavaScript

$ git clone

1
$ git clone https://github.com/ruanyf/css-modules-demos.git

下一场,安装正视。

JavaScript

$ cd css-modules-demos $ npm install

1
2
$ cd css-modules-demos
$ npm install

随着,就能够运维第1个示范了。

JavaScript

$ npm run demo01

1
$ npm run demo01

打开浏览器,访问

 npm init 

3)在Webpack中使用,需要为css-loader增加modules

1. 什么是 Webpack?

一、局地效能域

CSS的平整都以大局的,任何二个零部件的体制规则,都对全体页面有效。

爆发部分作用域的绝无仅有办法,正是行使叁个整个世界无双的class的名字,不会与别的选取重视名。那正是CSS Modules 的做法。

上边是三个React组件App.js。

JavaScript

import React from ‘react’; import style from ‘./App.css’; export default
() => { return ( <h1 className={style.title}> Hello World
</h1> ); };

1
2
3
4
5
6
7
8
9
10
import React from ‘react’;
import style from ‘./App.css’;
 
export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

上边代码中,大家将样式文件App.css输入到style对象,然后引用style.title代表一个class。

CSS

.title { color: red; }

1
2
3
.title {
  color: red;
}

营造筑工程具会将类名style.title编译成三个哈希字符串。

XHTML

<h1 class=”_3zyde4l1yATCOkgn-DBWEL”> Hello World </h1>

1
2
3
<h1 class="_3zyde4l1yATCOkgn-DBWEL">
  Hello World
</h1>

App.css也会同时被编写翻译。

JavaScript

._3zyde4l1yATCOkgn-DBWEL { color: red; }

1
2
3
._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

那样壹来,这么些类名就改成独一无2了,只对App组件有效。

CSS Modules
提供各类插件,援助分化的创设工具。本文使用的是
Webpack
的css-loader插件,因为它对
CSS Modules 的扶助最棒,而且很不难采用。顺便说一下,借使你想学
Webpack,能够阅读笔者的教程Webpack-Demos4858美高梅,。

上边是这么些示例的webpack.config.js。

JavaScript

module.exports = { entry: __dirname + ‘/index.js’, output: {
publicPath: ‘/’, filename: ‘./bundle.js’ }, module: { loaders: [【4858美高梅】入门教程,用法教程。 {
test: /.jsx?$/, exclude: /node_modules/, loader: ‘babel’, query: {
presets: [‘es2015’, ‘stage-0’, ‘react’] } }, { test: /.css$/, loader:
“style-loader!css-loader?modules” }, ] } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
  entry: __dirname + ‘/index.js’,
  output: {
    publicPath: ‘/’,
    filename: ‘./bundle.js’
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        loader: ‘babel’,
        query: {
          presets: [‘es2015’, ‘stage-0’, ‘react’]
        }
      },
      {
        test: /.css$/,
        loader: "style-loader!css-loader?modules"
      },
    ]
  }
};

上边代码中,关键的1行是style-loader!css-loader?modules,它在css-loader前面加了2个查询参数modules,表示打开
CSS Modules 功效。

以后,运转那几个德姆o。

JavaScript

$ npm run demo01

1
$ npm run demo01

打开
,能够看到结果,h一标题突显为革命。

安装webpack

// webpack 1.x

{
    test: /\.css$/,
    loader: "style-loader!css-loader?modules"
},


// webpack 2.x
{
  test: /\.css$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        modules: true,
      }
    }
  ]
}

1.1 解答

粗略的话,Webpack 正是贰个针对 JavaScript
代码的模块打包工具。然则自发布以来,它演变成了1个针对性富有前端代码的管理工具(不管是其本人有意如故社区的意愿)。

4858美高梅 3

旧的职责运营工具处理方式:HTML、CSS 和 JavaScript
都以分离的。必须分别对每壹项进行政管理制,并且还要确定保障全体东西正确地布局到生育环境。

Gulp
那样的职务运维工具得以操作很多例外的预处理器和编写翻译器,然则在全部意况下,它都须要吸收二个源码输入并将其拍卖成1个编写翻译好的输出。可是,它是在不爱抚整个系统的事态下每个去处理的。这正是开发者的承担了:检查职分运维工具有无遗漏的地点,并为所有变更的有个别找到正确的办法,将它们在生养条件上协调1致。

Webpack
通过三个勇敢的打听试图减轻开发者的负责:**比方开发进度的某部部分能够团结管理依赖会如何?如若大家得以以如此壹种方法来简单地写代码:营造进度仅依据最终所急需的东西来治本它和谐,会如何?
**

4858美高梅 4

Webpack 处理方式:倘诺是 Webpack
知道的代码,那么它就只会卷入实际在生养环境当中使用的某个。

假如你是病故几年里 Web
社区中级的一员,那么你一定已经领悟首要选用化解难点的不2秘籍:使用 JavaScript
构建
。所以 Webpack 试图透过用 JavaScript
传递重视来使创设进程变得更为简单。但是它设计的精美之处并不在于不难的代码管理有个别,而介于它的治本范畴是百分之百立竿见影的
JavaScript(还有 Node 天性)。Webpack
使你有空子写出一些对完全系统有更加青眼知的 JavaScript 代码。

换句话说:你不是为着 Webpack 写代码,而是为了您的类型写代码。再者
Webpack 在保险进步(当然包含有些配置)。

一句话来说,固然你早已挣扎于上面这么些景况中的个中之一:

  • 相当大心将壹些不要求的样式表可能 JS 库引进生产环境,导致项目容量变大
  • 遇见成效域难题 – 不管是来自 CSS 依旧 JavaScript
  • 不停寻找贰个好的系统好让你能够在 JavaScript 代码里使用 Node 或 Bower
    的模块,恐怕注重一雨后春笋疯狂的后端配置来不易地运用那多少个模块
  • 亟待优化能源分发机制却又顾虑会毁掉掉某个事物

…那么你就能够收益于 Webpack 了。它通过让 JavaScript
取代开发者的大脑来关切注重和加载顺序,轻松地消除了上边这几个题目。最佳的局地是如何?Webpack
甚至足以在服务端无缝运转,那代表你照样能够采用 Webpack
来营造渐进式增强的网站。

2、全局功效域

CSS Modules
允许接纳:global(.className)的语法,声美赞臣(Meadjohnson)个大局规则。凡是那样表明的class,都不会被编写翻译成哈希字符串。

App.css加盟二个大局class。

JavaScript

.title { color: red; } :global(.title) { color: green; }

1
2
3
4
5
6
7
.title {
  color: red;
}
 
:global(.title) {
  color: green;
}

App.js行使普通的class的写法,就会引用全局class。

JavaScript

import React from ‘react’; import styles from ‘./App.css’; export
default () => { return ( <h1 className=”title”> Hello World
</h1> ); };

1
2
3
4
5
6
7
8
9
10
import React from ‘react’;
import styles from ‘./App.css’;
 
export default () => {
  return (
    <h1 className="title">
      Hello World
    </h1>
  );
};

运行这一个示例。

JavaScript

$ npm run demo02

1
$ npm run demo02

打开

CSS Modules
还提供一种显式的1些功能域语法:local(.className),等同于.className,所以地点的App.css也足以写成上面那样。

JavaScript

:local(.title) { color: red; } :global(.title) { color: green; }

1
2
3
4
5
6
7
:local(.title) {
  color: red;
}
 
:global(.title) {
  color: green;
}

npm install webpack –save

4)代码引进方式

2. 第一步

叁、定制哈希类名

css-loader暗中认可的哈希算法是[hash:base64],这会将.title编译成._三zyde4l一yATCOkgn-DBWEL那样的字符串。

webpack.config.js中间能够定制哈希字符串的格式。

JavaScript

module: { loaders: [ // … { test: /.css$/, loader:
“style-loader!css-loader?modules&localIdentName=[path][name]—[local]—[hash:base64:5]”
}, ] }

1
2
3
4
5
6
7
8
9
module: {
  loaders: [
    // …
    {
      test: /.css$/,
      loader: "style-loader!css-loader?modules&amp;localIdentName=[path][name]—[local]—[hash:base64:5]"
    },
  ]
}

运作那个示例。

JavaScript

$ npm run demo03

1
$ npm run demo03

你会发现.title被编译成了demo0三-components-App—title—GpMto。

安装babel

// CSS 
.contentTitle {
  color: red;
}

// React
import React from 'react';
import style from './App.css';

export default () => {
  return (
    <h1 className={style.contentTitle}>
      Hello World
    </h1>
  );
};

2.1 第一步

在那篇教程里大家将利用
Yarn(brew install
yarn
)来替代 npm
,但那完全在于你本人,它们做的是如出一辙的作业。打开到品种文件夹,在命令行窗口运营上面包车型的士通令添加
Webpack 二 到全局包和地方品种里:

npm i -g webpack webpack-dev-server@2
yarn add --dev webpack webpack-dev-server@2

接下来在根目录新建一个 webpack.config.js
文本用来声称 Webpack 的布署:

const path = require('path');
const webpack = require('webpack');
module.exports = {
  context: path.resolve(__dirname, './src'),
  entry: {
    app: './app.js',
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js',
  },
};

注意:__dirname指的是根目录。
还记得 Webpack
“知道”项目里发出了怎么着啊?它是由此读取你的代码知道的(不用操心,它签署了一份保密协议)。Webpack
基本做了上边这么些工作:

  1. 从 context 对应的文书夹初阶…
  2. …寻找 entry 里全数的公文名…
  3. …然后读取它们的内容。在分析代码时,每一个通过 import(ES⑥) 或
    require()(Node)
    引进的信赖都会被打包到最后的创设结果当中。它会随着搜索那些借助于,以及那二个依靠的注重性,直到“正视树”的叶子节点
    — 只打包它所急需的注重,未有其它的事物。
  4. 随即,Webpack 将具备东西打包到 output.path 对应的公文夹里,使用
    output.filename 对应的命超模板来命名([name] 被 entry
    里的靶子键值所代替)

因此1旦 src/app.js
文件看起来像下边那样的话(借使提前运转了 yarn add –dev moment
):

import moment from 'moment';

var rightNow = moment().format('MMMM Do YYYY, h:mm:ss a');
console.log(rightNow);

// "October 23rd 2016, 9:30:24 pm"

跟着运营:

webpack -p

注意:p
标志表示“生产(production)”形式同时会回落或丑化(uglify/minify)输出。

接下来它将出口1个 dist/app.bundle.js
文件,功能正是打字与印刷出脚下日子和岁月到控制台。注意到 Webpack 自动知道了
‘moment’ 指的是怎么(但假设已经有二个 moment.js 在你的目录当中,那么
Webpack 暗中同意就会先行使用这几个而不是 moment 的 Node 模块)。

四、 Class 的组合

在 CSS Modules
中,三个选取器能够持续另三个选拔器的平整,那称为”组合”(“composition”)。

在App.css中,让.title继承.className

JavaScript

.className { background-color: blue; } .title { composes: className;
color: red; }

1
2
3
4
5
6
7
8
.className {
  background-color: blue;
}
 
.title {
  composes: className;
  color: red;
}

App.js毫无修改。

JavaScript

import React from ‘react’; import style from ‘./App.css’; export default
() => { return ( <h1 className={style.title}> Hello World
</h1> ); };

1
2
3
4
5
6
7
8
9
10
import React from ‘react’;
import style from ‘./App.css’;
 
export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

运转那几个示例。

JavaScript

$ npm run demo04

1
$ npm run demo04

打开

App.css编译成上面包车型客车代码。

JavaScript

._2DHwuiHWMnKTOYG45T0x34 { color: red; } ._10B-buq6_BEOTOl9urIjf8 {
background-color: blue; }

1
2
3
4
5
6
7
._2DHwuiHWMnKTOYG45T0x34 {
  color: red;
}
 
._10B-buq6_BEOTOl9urIjf8 {
  background-color: blue;
}

对应地, h壹的class也会编写翻译成<h壹 class=”_2DHwuiHWMnKTOYG45T0x34
_10B-buq6_BEOTOl9urIjf8″>。

npm install babel-core babel-preset-es2015 –save

npm install babel-loader –save

5、生成的页面中选择器变化

三. 甩卖多个文本

你只须要经过改动 entry
目标就足以钦定任意数量所愿意的 entry 或 output 点。

5、输入任何模块

接纳器也得以持续别的CSS文件之中的平整。

another.css

JavaScript

.className { background-color: blue; }

1
2
3
.className {
  background-color: blue;
}

App.css能够继承another.css里面包车型客车平整。

JavaScript

.title { composes: className from ‘./another.css’; color: red; }

1
2
3
4
.title {
  composes: className from ‘./another.css’;
  color: red;
}

运维这几个示例。

JavaScript

$ npm run demo05

1
$ npm run demo05

打开

安装less

// HTML
<h1 class="_3zyde4l1yATCOkgn-DBWEL">
  Hello World
</h1> 

// CSS
._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

三.1 五个文件,打包在一道

const path = require('path');
const webpack = require('webpack');
module.exports = {
  context: path.resolve(__dirname, './src'),
  entry: {
    app: ['./home.js', './events.js', './vendor.js'],
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js',
  },
};```
所有文件会按数组顺序一起打包到 dist/app.bundle.js
 一个文件当中。

#### 3.2 多个文件,多个输出

const path = require(‘path’);
const webpack = require(‘webpack’);

module.exports = {
context: path.resolve(__dirname, ‘./src’),
entry: {
home: ‘./home.js’,
events: ‘./events.js’,
contact: ‘./contact.js’,
},
output: {
path: path.resolve(__dirname, ‘./dist’),
filename: ‘[name].bundle.js’,
},
};

另外,你还可以选择打包成多个 JS 文件来将应用拆解成几个部分。像上面这样做就可以打包成三个文件:dist/home.bundle.js、dist/events.bundle.js 和 dist/contact.bundle.js。

#### 3.3 自动打包第三方库
如果你正在将应用拆解,打包成多个 output 的话(如果应用的某部分有大量不需要提前加载的 JS 的话,这样做会很有用),那么在这些文件里就有可能出现重复的代码,因为在解决依赖问题的时候它们是互相不干预的。幸好,Webpack 有一个内建插件 **CommonsChunk** 来处理这个问题:

module.exports = {
// …
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ‘commons’,
filename: ‘commons.js’,
minChunks: 2,
}),
],
// …
};

现在,在 output 的文件里,如果有任意模块加载了两次或更多(通过 minChunks 设置该值),它就会被打包进一个叫 commons.js 的文件里,后面你就可以在客户端缓存这个文件了。当然,这肯定会造成一次额外的请求,但是却避免了客户端多次下载相同库的问题。所以在很多场景下,这都是提升速度的举措。

#### 3.4 手工打包第三方库
如果你喜欢自己做更多的事情,您可以选择采用更人工的方法:

module.exports = {
entry: {
index: ‘./index.js’,
vendor: [‘react’, ‘react-dom’, ‘rxjs’],
},
// …
}

在这里,你明确告诉 webpack 导出包含 react, react-dom, 和 rxjs Node 模块的vendor 包,而不是依靠  CommonsChunkPlugin自动这些事情。

## 4. 开发
#### 4.1 开发
实际上 Webpack 有它自己的开发服务器,所以无论你正在开发一个静态网站,或者只是正在原型化前端阶段,这个服务器都是完美可用的。想要运行它,只需要在 webpack.config.js 里添加一个 devServer 对象:

module.exports = {
context: path.resolve(__dirname, ‘./src’),
entry: {
app: ‘./app.js’,
},
output: {
filename: ‘[name].bundle.js’,
path: path.resolve(__dirname, ‘./dist/assets’),
publicPath: ‘/assets’, // New
},
devServer: {
contentBase: path.resolve(__dirname, ‘./src’), // New
},
};

现在新建一个 src/index.html 文件,加入下面这行:

<script src=”/assets/app.bundle.js”></script>

然后在命令行中,运行:

webpack-dev-server

服务器现在就运行在了 localhost:8080 上。注意 script 标签中的 /assets 对应的是 output.publicPath
 的值 - 可以随便填成你想要的命名(如果需要一个 CDN,这就很有用了)。

当你更改 JavaScript 代码的时候,Webpack 就会实时更新页面而无需手动刷新浏览器。但是,**任何对 webpack.config.js 的更改都需要重启服务器**才可以生效。

## 5. 全局可访问方法
#### 5.1 全局可访问方法 
需要在全局命名空间里使用某些自己的方法吗?只需简单地在 webpack.config.js 里设置 output.library:

module.exports = {
output: {
library: ‘myClassName’,
}
};

…这样就会把打包结果绑定到一个 window.myClassName
 实例上。所以使用这种命名作用域,就可以调用 entry 点里面的方法了(可以阅读[文档](https://webpack.js.org/concepts/output/#output-library)获取更多关于这个配置的信息)。

## 6. 加载器(Loaders)
目前为止,我们所讲到的都是关于 JavaScript 代码的使用。从 JavaScript 代码开始是非常重要的,因为**这是 Webpack 唯一使用的语言**。我们可以处理任何文件类型,只要将它们传进 JavaScript 代码中。这个功能用 **Loaders** 来实现。

一个 loader 可以指向一个像 Sass 的预处理器,或者像 Babel 的编译器。在 NPM 中,它们通常是像 sass-loader 或 babel-loader 这样命名为 *-loader。

#### 6.1 Babel + ES6
如果我们想要在项目中通过 Babel 来使用 ES6,首先要在本地正确地安装一些 loader:

yarn add –dev babel-loader babel-core babel-preset-es2015

…然后把它们添加进 webpack.config.js 好让 Webpack 知道哪里使用它们。

module.exports = {
// …

module: {
rules: [
{
test: /.js$/,
use: [{
loader: ‘babel-loader’,
options: { presets: [‘es2015’] }
exclude: [/node_modules/],
}],
},

  // Loaders for other file types can go here
],

},

// …
};

一个给 Webpack 1 用户的提示:Loaders 的核心概念仍然是一样的,但语法上做了改进。在他们完成文档之前这可能不是确切的首选语法。

这样做就可以为 /\.js$/ 正则表达式寻找以 .js 结尾的文件,最后通过 Babel 编译加载。Webpack 依赖正则表达式给予你完整的控制 - 但它不会限制你的文件后缀,或者假设你的代码必须以某种特定形式组织起来。举个例子:也许你的 /my_legacy_code/ 文件夹里的代码不是用 ES6 写的,那么你就可以把上面的 test 修改为 /^((?!my_legacy_code).)*\.js$/
,这样就可以绕过这个文件夹,其余文件用 Babel 编译。

#### 6.2 CSS + Style Loader
如果我们只想加载应用需要的 CSS,也可以那么做。假设有一个 index.js 文件,在里面引入:

import styles from ‘./assets/stylesheets/application.css’;

就会得到一个错误:You may need an appropriate loader to handle this file type。记住 Webpack 只能读取 JavaScript,所以我们必须安装正确的 loader:

yarn add –dev css-loader style-loader

然后在 webpack.config.js 里添加一个规则:

module.exports = {
// …
module: {
rules: [
{
test: /.css$/,
use: [“style-loader”, “css-loader”],
},
// …
],
},
};

这些 loader 会以数组逆序运行。这意味着 css-loader 会在 style-loader 之前运行。

你可能注意到甚至在生产构建的结果中,也把 CSS 打包进了 JavaScript 里面,并且 style-loader
 手动地将样式写进了 <head>
 中。乍一看这可能有点奇怪,但当你考虑足够多的时候就会慢慢发现这其实是有道理的。你保存了一个头部请求(在某些连接上节省宝贵的时间),并且如果你用 JavaScript 来加载 DOM,这么做基本上就消除了它自身的[无样式闪屏](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)问题。

还注意到 Webpack 已经通过把所有文件打包成一个从而自动解决了所有的 @import
 查询问题(比起依赖 CSS 默认的引入导致不必要的头部请求和缓慢的资源加载,这么做显然更好)。

从 JS 里加载 CSS 相当爽,**因为你可以用一种强有力的新方式去模块化 CSS 代码了**。假设你只通过 button.js 加载了 button.css,这就意味着如果 button.js 没有实际用到的话,它的 CSS 也不会打包进我们的生产构建结果。如果你坚持使用像 SMACSS 或者 BEM 那样的面向组件的 CSS,就会知道把 CSS 和 HTML + JavaScript 代码放更近的价值了。

#### 6.3 CSS + Node modules
我们可以在 Webpack 里用 Node 的 ~
 前缀去引入 Node Modules。假设我们提前运行了 yarn add normalize.css,就可以这么用:

@import “~normalize.css”;

这样就可以全面使用 NPM 来管理第三方样式库(版本及其他)而对我们而言就无需复制粘贴了。更进一步的是,Webpack 打包 CSS 比使用默认的 CSS 引入有着显而易见的优势,让客户端远离不必要的头部请求和缓慢的资源加载。

**更新:这个部分和下面的部分为了更准确都进行了更新,不用再困扰于使用 CSS Modules 去简单地引入 Node Modules 了。感谢 [Albert Fernández](https://medium.com/u/901a038e32e5) 的帮助!**

#### 6.4 CSS Modules
你可能已经听说过 [CSS Modules](https://github.com/css-modules/css-modules),它将 CSS(Cascading Style Sheets里的 C(Cascading)给提出来了。它只在用 JavaScript 构建 DOM 的时候使用有最佳效果,但本质上来说,它巧妙地将 CSS 在加载它的 JavaScript 里作用域化了([点击这个链接学习更多相关知识](https://github.com/css-modules/css-modules))。如果你计划使用它,CSS Modules 对应的 loader 是 
`css-loader(yarn add --dev css-loader):`

module.exports = {
// …

module: {
rules: [
{
test: /.css$/,
use: [
‘style-loader’,
{
loader: ‘css-loader’,
options: { modules: true }
},
],
},

  // …
],

},
};

**注意:对于 css-loader
 我们使用了展开的对象语法来为它添加配置。你可以写简单的字符串代表使用默认配置,style-loader
 就还是这么做的。**

值得注意的是实际上在使用 CSS Modules 引入 Node Modules 的时候可以去掉 ~ 符号(如 @import "normalize.css";)。但是,当 @import 你自己的 CSS 时可能会遇到错误。如果你得到了 “can’t find ___” 这样的错误,尝试添加一个 resolve 对象到 webpack.config.js 里,好让 Webpack 更好地理解你预期的模块顺序。

module.exports = {
//…

resolve: {
modules: [path.resolve(__dirname, ‘./src’), ‘node_modules’]
},
};

首先指定了我们自己的源文件目录,然后是 node_modules。这样子 Webpack 解决起来就会处理得更好一些,按照那个顺序先找我们的源文件目录,然后是已安装的 Node Modules(分别用你自己的源码和 Node Modules 目录替换其中的 src 和 node_modules)。

#### 6.5 Sass
想用 Sass?没问题,安装:

yarn add –dev sass-loader node-sass

然后添加另一条规则:

module.exports = {
// …

module: {
rules: [
{
test: /.(sass|scss)$/,
use: [
‘style-loader’,
‘css-loader’,
‘sass-loader’,
]
}

  // …
],

},
};

接下来当 JavaScript 调用 import 引入一个 .scss 或 .sass 文件时,Webpack 就会做它该做的事情了。

#### 6.6 分开打包 CSS
或许你正在处理渐进式增强的网站,又或许因为其他的原因你需要一个分离的 CSS 文件。我们可以简单地实现,只需要在配置里用 extract-text-webpack-plugin 替换掉 style-loader,而无需改变其他任何代码。以 app.js 文件为例:

import styles from ‘./assets/stylesheets/application.css’;

本地安装插件(我们需要这个的测试版本,2016年10月发布):

yarn add –dev extract-text-webpack-plugin@2.0.0-beta.4

添加到 webpack.config.js:

const ExtractTextPlugin = require(“extract-text-webpack-plugin”);
module.exports = {
// …
module: {
rules: [
{
test: /.css$/,
loader: ExtractTextPlugin.extract({
loader: ‘css-loader?importLoaders=1’,
}),
},
// …
]
},
plugins: [
new ExtractTextPlugin({
filename: “[name].bundle.css”,
allChunks: true,
}),
],
};

现在运行 webpack -p 的时候就可以看到一个 app.bundle.css 文件出现在 output 目录里了。像往常一样简单地添加一个 <link> 标签到 HTML 文件里就可以了。

#### 6.7 HTML
你可能已经猜到,Webpack 还有一个 [html-loader 插件](https://github.com/webpack/html-loader)。但是,当我们开始用 JavaScript 加载 HTML 的时候,这其实是一个可以分支成不同方法的地方,而且我想不到一个单独的简单示例可以覆盖所有下一步操作的可能性。通常,你可能会在用 [React](https://facebook.github.io/react/)、[Angular](https://angularjs.org/)、[Vue](http://vuejs.org/) 或者 [Ember](http://emberjs.com/) 构建的大型系统中加载诸如 [JSX](https://jsx.github.io/)、[Mustache](https://github.com/janl/mustache.js/) 或者 [Handlebars](http://handlebarsjs.com/) 这样偏向 JavaScript 的模板 HTML;或者你可能使用一个像 [Pug](https://github.com/pugjs/pug-loader)(以前的 Jade)或者 [Haml](https://github.com/AlexanderPavlenko/haml-loader) 这样的 HTML 预处理器;或者你可能只是想简单地将源文件目录里的 HTML 复制到构建结果目录里。不管你想做什么,我没办法假设。

所以我准备在此结束本教程:你可以用 Webpack 加载 HTML,但这一点你必须自己根据你的架构做出决策,不管是我还是 Webpack 都没办法帮到你。不过使用上述例子作为参考并在 NPM 上找到正确的 loader 应该足够让你继续下去了。

## 7. 从模块角度思考
#### 7.1 从模块角度思考
为了最大程度发挥 Webpack 的作用,你不得不从模块的角度去思考(小、可复用、自包含进程),一件件事情慢慢去做好。这意味着下面这样的东西:

└── js/
└── application.js // 300KB of spaghetti code

把它变成:

└── js/
├── components/
│ ├── button.js
│ ├── calendar.js
│ ├── comment.js
│ ├── modal.js
│ ├── tab.js
│ ├── timer.js
│ ├── video.js
│ └── wysiwyg.js

└── application.js // ~ 1KB of code; imports from ./components/

结果是干净且可复用的代码。每个独立的组件取决于导入自身的依赖,并按照它想要的方式导出到其他模块。配合 Babel + ES6 使用,还可以利用 [JavaScript Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) 做出更好的模块化,并且**不要去想它**,作用域只是在起作用。

想知道更多关于模块的内容,可以看这篇 Preethi Kasreddy 写的很棒的[文章](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc)。

## 8. 延伸阅读
#### 8.1 延伸阅读
* [What’s New in Webpack 2](https://gist.github.com/sokra/27b24881210b56bbaff7)
* [Webpack + PostCSS + cssnext](https://blog.madewithenvy.com/webpack-2-postcss-cssnext-fdcd2fd7d0bd#.asbpg46l1)
* [Webpack Config docs](https://webpack.js.org/configuration/)
* [Webpack Examples](https://github.com/webpack/webpack/tree/master/examples)
* [React + Webpack Starter Kit](https://github.com/kriasoft/react-starter-kit)
* [Webpack How-to](https://github.com/petehunt/webpack-howto)

6、输入变量

CSS Modules 帮助采纳变量,不过要求设置 PostCSS 和
postcss-modules-values。

JavaScript

$ npm install –save postcss-loader postcss-modules-values

1
$ npm install –save postcss-loader postcss-modules-values

把postcss-loader加入webpack.config.js。

JavaScript

var values = require(‘postcss-modules-values’); module.exports = {
entry: __dirname + ‘/index.js’, output: { publicPath: ‘/’, filename:
‘./bundle.js’ }, module: { loaders: [ { test: /.jsx?$/, exclude:
/node_modules/, loader: ‘babel’, query: { presets: [‘es2015’,
‘stage-0’, ‘react’] } }, { test: /.css$/, loader:
“style-loader!css-loader?modules!postcss-loader” }, ] }, postcss: [
values ] };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var values = require(‘postcss-modules-values’);
 
module.exports = {
  entry: __dirname + ‘/index.js’,
  output: {
    publicPath: ‘/’,
    filename: ‘./bundle.js’
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        loader: ‘babel’,
        query: {
          presets: [‘es2015’, ‘stage-0’, ‘react’]
        }
      },
      {
        test: /.css$/,
        loader: "style-loader!css-loader?modules!postcss-loader"
      },
    ]
  },
  postcss: [
    values
  ]
};

接着,在colors.css其中定义变量。

JavaScript

@value blue: #0c77f8; @value red: #ff0000; @value green: #aaf200;

1
2
3
@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;

App.css能够引用这么些变量。

JavaScript

@value colors: “./colors.css”; @value blue, red, green from colors;
.title { color: red; background-color: blue; }

1
2
3
4
5
6
7
@value colors: "./colors.css";
@value blue, red, green from colors;
 
.title {
  color: red;
  background-color: blue;
}

运转这几个示例。

JavaScript

$ npm run demo06

1
$ npm run demo06

打开

1 赞 3 收藏
评论

4858美高梅 5

npm install css-loader style-loader less less-loader –save

6、node_modules内代码不处理

开创2个webpack.config.js配置文件

{
  test: /\.css$/,
  loader: ‘style-loader!css-loader?modules’,
  exclude:[path.resolve(__dirname, ‘..’, ‘node_modules’)]
}, {
  test: /\.css$/,
  loader: ‘style-loader!css-loader’,
  include:[path.resolve(__dirname, ‘..’, ‘node_modules’)]
},

var path = require(‘path’)

var outPath = path.resolve(__dirname, ‘./bundle’)

module.exports = {

        entry: ‘./app.js’,

        output: {

                path: outPath,

                filename: ‘app.bundle.js’,

        },

       module: {

                loaders: [{

                            test: /\.js$/,

                            exclude: /node_modules/,

                            loader: ‘babel-loader’

                },{

                           test: /\.css$/,

                           exclude: /node_modules/,

                           loader: ‘style-loader!css-loader’

                 },{

                            test: /\.less$/,

                            exclude: /node_modules/,

                             loader:
‘style-loader!css-loader!less-loader’

                 }]

          }

}

 

在根目录下创办二个.babelrc文本

{ “presets”: [ “es2015” ] }

在package.json中计划scriptsm,添加脚本

“start”: “webpack –watch –progress –colors –display-chunks “

4858美高梅 6

npm start 运行

自家的连串地址:github

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有