目录结构
一：如何安装和配置
我的项目目录结构是：文件名叫webpack，里面只有一个main.html，代码如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="src/react.min.js"></script> </head> <body> <div id="content"></div> <script src="build/build.js"></script> </body> </html>
还有一个文件夹src，该文件夹存放了二个js文件；react.min.js源文件和main.js文件，main.js源码如下：
/* 内容区模块代码 */ var ContentMode = React.createClass({ render: function(){ return ( <div className="ContentMode"> <div class="contents">{this.props.contents}</div> {this.props.children} </div> ) } }); /* 页面div封装 上面三个模块 */ var Page = React.createClass({ render: function(){ return ( <div className="homepage"> <ContentMode contents ="longen">this is one comment</ContentMode > <ContentMode contents ="longen2">this is two comment</ContentMode > </div> ) } }); /* 初始化到content容器内 */ React.render( React.createElement(Page,null),document.getElementById("content") );
该代码是React.js代码，是react.js入门学习一中的代码复制过来的 为了演示；
安装步骤如下：
- 生成package.json文件；
首先我们需要在根目录下生成package.json文件，需要进入项目文件内根目录下执行如下命令：npm init
2 . 通过全局安装webpack
执行命令如下：npm install -g webpack 如下所示：
3. 配置webpack（每个目录下都必须有一个webpack.config.js）
module.exports = { entry: "./src/main.js", output: { filename: "build/build.js" }, module: { loaders: [ //.css 文件使用 style-loader 和 css-loader 来处理 { test: /.css$/, loader: "style!css" }, //.js 文件使用 jsx-loader 来编译处理 { test: /.js$/, loader: "jsx-loader" } ] }, resolve: { extensions: ['', '.js', '.jsx'] }, plugins: [] };
entry :是页面中的入口文件，比如我这边的入口文件时main.js
output: 是指页面通过webpack打包后生成的目标文件放在什么地方去，我这边是在根目录下生成build文件夹，该文件夹内有一个build.js文件；
resolve: 定义了解析模块路径时的配置，常用的就是extensions; 可以用来指定模块的后缀，这样在引入模块时就不需要写后缀，会自动补全。
plugins: 定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取公用的部分，生成common.js;
module.loaders：是文件的加载器，比如我们之前react需要在页面中引入jsx的js源码到页面上来，然后使用该语法，但是通过webpack打包后就不需要再引入JSXTransformer.js；看到上面的加载器；比如jsx-loader加载器就是代表JSXTransformer.js的，还有style-loader和css-loader加载器；因此在使用之前我们需要通过命令把它引入到项目上来；因此需要如下命令生成下；
安装：jsx-loader加载器 npm install jsx-loader --save-dev
安装：Style-loader加载器 npm install style-loader --save-dev
安装：css-loader 加载器 npm install css-loader --save-dev
局部安装webpack 执行命令：npm install webpack --save-dev
现在我们来执行命令 webpack：
还可以使用如下命令：webpack --display-error-details 命令执行，这样的话方便出错的时候可以查看更详尽的信息
上面是使用webpack打包；现在我们再来看看使用第二种方案来打包：
Gulp全局安装 npm install -g gulp
gulp局部安装 使用命令 npm install gulp --save-dev
因此在我们文件夹node_modules下生成文件如下：
使用gulp来进行打包：
在根目录下需要新建 Gulpfile.js，源码如下：
var gulp = require('gulp'); var webpack = require("gulp-webpack"); var webpackConfig = require("./webpack.config.js"); gulp.task('webpack', function () { var myConfig = Object.create(webpackConfig); return gulp .src('./src/main.js') .pipe(webpack(myConfig)) .pipe(gulp.dest('./build')); }); // 注册缺省任务 gulp.task('default', ['webpack']);
然后webpack.config.js代码变为如下：
module.exports = { entry: "./src/main.js", output: { filename: "build.js" }, module: { loaders: [ //.css 文件使用 style-loader 和 css-loader 来处理 { test: /.css$/, loader: "style!css" }, //.js 文件使用 jsx-loader 来编译处理 { test: /.js$/, loader: "jsx-loader" } ] }, resolve: { extensions: ['', '.js', '.jsx'] }, plugins: [] };
然后再在命令行中输入gulp即可生成build/build.js了
三：理解webpack加载器：
Webpack提供了一套加载器，比如css-loader,less-loader,style-loader，url-loader等，用于将不同的文件加载到js文件中，比如url-loader用于在js中加载png/jpg格式的图片文件，css/style loader用于加载css文件，less-loader加载器是将less编译成css文件；
配置加载器
module.exports = {
entry: "./src/main.js",
output: {
filename: "build.js",
path: __dirname + '/assets/',
publicPath: "/assets/"
},
module: {
loaders: [
{test: /.css$/, loader: 'style!css'},
{test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
}
resolve: {
extensions: ['', '.js', '.jsx'],
//模块别名定义，方便后续直接引用别名，无须多写长长的地址
alias: {
a : 'js/assets/a.js', // 后面直接引用 require(“a”)即可引用到模块
b : 'js/assets/b.js',
c : 'js/assets/c.js'
}
},
plugins: [commonsPlugin, new ExtractTextPlugin("[name].css")]
}
module.loader: 其中test是正则表达式，对符合的文件名使用相应的加载器.
/.css$/会匹配 xx.css文件，但是并不适用于xx.sass或者xx.css.zip文件.
url-loader ：它会将样式中引用到的图片转为模块来处理; 配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式。
entry ：模块的入口文件。依赖项数组中所有的文件会按顺序打包，每个文件进行依赖的递归查找，直到所有模块都被打成包；
output：模块的输出文件，其中有如下参数：
filename: 打包后的文件名
path: 打包文件存放的绝对路径。
publicPath: 网站运行时的访问路径。
relolve.extensions: 自动扩展文件的后缀名，比如我们在require模块的时候，可以不用写后缀名的。
relolve.alias: 模块别名定义，方便后续直接引用别名，无须多写长长的地址
plugins 是插件项;
四：理解less-loader加载器的使用
less-loader加载器，其他的sass-loader也是一个意思，这边不会对所有的预处理的css做讲解，less-loader加载器是把css代码转化到style标签内，动态插入到head标签内；我们先来看看我项目的结构如下：
css文件下有一个main.less 代码如下：
@base: #f938ab;
html,body {
background:@base;
}
Src文件下有一个main.js文件 此js文件时入口文件；里面的代码如下：
// css
require('../css/main.less');
webpack.config.js 代码配置如下：
module.exports = { entry: "./src/main.js", output: { filename: "build.js", path: __dirname }, module: { loaders: [ //.css 文件使用 style-loader 和 css-loader 来处理 { test: /.less$/, loader: "style!css!less" } ] }, resolve: { extensions: ['', '.js', '.jsx'] }, plugins: [] };
Gulpfile.js代码如下(注意：这边既可以需要此文件使用gulp进行运行打包，也可以不需要此文件，直接使用webpack进行打包；二种方式任选其一)。
var gulp = require('gulp');
var webpack = require("gulp-webpack");
var webpackConfig = require("./webpack.config.js");
gulp.task('webpack', function () {
var myConfig = Object.create(webpackConfig);
return gulp
.src('./src/main.js')
.pipe(webpack(myConfig))
.pipe(gulp.dest('./build'));
});
// 注册缺省任务
gulp.task('default', ['webpack']);
需要安装 style-loader css-loader 和 less-loader 如下所示：
如上配置后， 运行下 gulp或者 webpack命令既可，在build文件夹内会生成build.js，此JS是动态生成style标签并解释正常的css插入到文档head标签内
五：理解babel-loader加载器的含义
babel-loader加载器能将ES6的代码转换成ES5代码，这使我们现在可以使用ES6了；我们在使用之前，我们需要安装babel-loader；执行命令：npm install babel-loader –save-dev
现在我们可以在webpack.config.js里面moudle.loaders配置加载器了，如下代码：
{test: /.js$/, loader: 'babel', exclude: '/node_modules/'}
因此webpack.config.js代码变成如下：
// 使用webpack打包 module.exports = { entry: "./src/main.js", output: { filename: "build.js", path: __dirname }, module: { loaders: [ {test: /.js$/, loader: 'babel', exclude: '/node_modules/'} ] }, resolve: { extensions: ['', '.js', '.jsx'] }, plugins: [] };
main.js 是页面的入口文件；代码如下：
let loader = require('./bind');
console.log(loader);
执行gulp
六：了解下webpack的几个命令
- webpack // 最基本的启动webpack的方法
- webpack -w // 提供watch方法；实时进行打包更新
- webpack -p // 对打包后的文件进行压缩
- webpack -d // 提供source map，方便调式代码
八：如何独立打包成样式文件
不想把样式打在脚本中，而是想独立css出来，然后在页面上外链css，这时候我们需要 extract-text-webpack-plugin 来帮忙：我们首先需要安装 extract-text-webpack-plugin：如下： npm install extract-text-webpack-plugin –save-dev 如下所示：
需要看看webpack.config.js 配置变成如下：
var ExtractTextPlugin = require("extract-text-webpack-plugin"); // 使用webpack打包 module.exports = { entry: "./src/main.js", output: { filename: "build.js" }, module: { loaders: [ //.css 文件使用 style-loader 和 css-loader 来处理 { test: /.less$/, loader: ExtractTextPlugin.extract( 'css?sourceMap!' + 'less?sourceMap' ) } ] }, resolve: { extensions: ['', '.js', '.jsx'] }, // 内联css提取到单独的styles的css plugins: [new ExtractTextPlugin('styles.css')] };
配置完成后 运行gulp下即可，在build文件夹内会生成2个文件，一个是build.js 处理模块的文件 另一个就是我们的styles.css了
九：如何打包成多个资源文件
webpack.config.js配置代码变成如下：
module.exports = { entry: { "main": "./src/main.js", "index": "./src/index.js" }, output: { filename: "[name].bundle.js" } };
配置完成后 运行gulp下即可
十：关于对图片的打包
图片是使用url-loader来加载的，我们既可以在css文件里url的属性；如下：
#content{
170px;
height:60px;
background:url('../images/1.jpg') no-repeat;
}
我们还可以直接对元素的src属性进行require赋值。如下代码：
var img = document.createElement("img");
img.src = require("../image/1.jpg");
document.body.appendChild(img);
项目的目录结构如下：
Css文件 main.css代码如下：
#content{
170px;
height:60px;
background:url('../images/1.jpg') no-repeat;
}
JS文件main.js代码如下：
require('../css/main.css');
Webpack.config.js配置文件代码如下：
// 使用webpack打包
module.exports = {
entry: {
"main": "./src/main.js"
},
output: {
path: './build/',
filename: "build.js"
},
module: {
loaders: [
{test: /.css$/, loader: 'style!css'},
{test: /.(png|jpg)$/, loader: 'url?limit=8192'}
]
}
};
直接运行webpack 可以生成build目录，build目录下会生成2个文件 一个是图片打包后，另外一个是build.js