一、首先要安装 Node.js, Node.js 自带了软件包管理器 npm,Webpack 须要Node.js v0.6 以上支持,建议使用最新版 Node.js。javascript
二、安装Webpack 到全局环境下 :css
npm install webpack -g //(能够经过命令行 webpack -h 或webpack -v 验证)
三、将 Webpack 安装到实际项目的依赖中,这样就可使用项目本地版本的 Webpack。java
npm install webpack --save-dev //查看 webpack 版本信息 : npm info webpack //安装指定版本的 webpack: npm install webpack@1.12.x --save-dev
四、肯定是否有 package.json,没有就经过 npm init 建立node
五、安装Loader转换器(只须要在本地安装,不需 -g)(Webpack 自己只能处理原生的 JavaScript 模块,可是 loader 转换器能够将各类类型的资源转换成 JavaScript 模块。这样,任何资源均可以成为 Webpack 能够处理的模块。)react
//经常使用的转换插件 npm install css-loader style-loader//转换CSS npm install postcss-loader --save-dev npm install url-loader //转换图片 npm install expose-loader --save-dev //暴露 npm install babel-loader babel-core 或 npm install jsx-loader // jsx转换 npm install less less-loader --save-dev // npm install babel-preset-es2015 //ECMAScript6语法依赖
六、配置webpack
var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); module.exports = { //页面入口文件配置 entry: { index : './src/js/page/index.js' }, //入口文件输出配置 output: { path: 'dist/js/page', filename: '[name].js' }, module: { //加载器配置 loaders: [ //.css 文件使用 style-loader 和 css-loader 来处理 { test: /\.css$/, loader: 'style-loader!css-loader!postcss-loader' }, //.less 转换loader { test: /\.less$/, loader: "style-loader!css-loader!less-loader" }, //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理 { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, //.js 文件使用 jsx-loader 来编译处理 { test: /\.jsx$/, loader: 'jsx-loader?harmony' }, //图片文件使用 url-loader 来处理,小于8kb的直接转为base64 { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}, //ECMAScript6语法依赖 { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: {presets: ['es2015', 'react'] } } ] }, //插件项 plugins: [commonsPlugin], //其它解决方案配置(webpack 有一个智能解析器,几乎能够处理任何第三方库,不管它们的模块形式是 CommonJS、 AMD 仍是普通的 JS 文件。甚至在加载依赖的时候,容许使用动态表达式 require("./js/my.js"),可是这样过于复杂,咱们能够经过这个配置项使得后面开发工做更加方便。) resolve: { //root: 'E:/github/flux-example/src', //绝对路径 //自动扩展文件后缀名,意味着咱们require模块能够省略不写后缀名 extensions: ['', '.js', '.json', '.scss'], //模块别名定义,方便后续直接引用别名,无须多写长长的地址 alias: { my: './js/my.js', //后续直接 var 标识符 = require('my') 便可 //标识符首字母不强要求大小写,eg:my 或 My api: './api.js' } } };
⑴ plugins 是插件项,这里咱们使用了一个 CommonsChunkPlugin 的插件,它用于提取多个入口文件的公共脚本部分,而后生成一个 common.js 来方便多页面之间进行复用。git
⑵ entry 是页面入口文件配置,output 是对应输出项配置(即入口文件最终要生成什么名字的文件、存放到哪里)。github