用 npm 安装 Webpack:
$ npm install webpack -g
# 查看 webpack 版本信息
$ npm info webpack
# 安装指定版本的 webpack
$ npm install webpack@1.12.x --save-dev
如果需要使用 Webpack 开发工具,要单独安装:
$ npm install webpack-dev-server --save-dev
//entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模块
编译 entry.js 并打包到 bundle.js:
$ webpack entry.js bundle.js
安装 extract-text-webpack-plugin //css样式从js文件中分离
$ npm install extract-text-webpack-plugin --save-dev
安装 loader:
$ npm install css-loader style-loader //css
webpack配置sass模块的加载
//在项目下,运行下列命令行
npm install --save-dev sass-loader//因为sass-loader依赖于node-sass,所以还要安装node-sass
npm install --save-dev node-sass
一般运行会失败,解决方法:
解决方案1:
装python2.7,用cnpm安装sass
解决方案2:
npm uninstall node-sass
npm install node-sass@latest
解决方案3:
FQ试试,或者用淘宝提供的cnpm
npm 改为cnpm
淘宝镜像安装:
1.临时使用
npm --registry https://registry.npm.taobao.org install express
2.持久使用
npm config set registry https://registry.npm.taobao.org
// 配置后可通过下面方式来验证是否成功
npm config get registry
// 或npm info express
Webpack.config.js 内容
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 var webpack = require('webpack') 2 var ExtractTextPlugin = require('extract-text-webpack-plugin');//css样式从js文件中分离出来,需要通过命令行安装 extract-text-webpack-plugin依赖包 3 module.exports = { 4 ////页面入口文件配置 5 entry: './entry.js', 6 //入口文件输出配置 7 output: { 8 path: __dirname, 9 filename: 'bundle.js' 10 }, 11 module: { 12 //加载器配置 13 loaders: [ 14 {test: /\.css$/, loader:ExtractTextPlugin.extract("style", 'css')}, 15 { 16 test: /\.scss$/, 17 loader: ExtractTextPlugin.extract("style", 'css!sass') //ExtractTextPlugin.extract("style", 'css!sass') 这里用了样式分离出来的插件,如果不想分离出来,可以直接这样写 loader:'style!css!sass' 18 } 19 ] 20 }, 21 //其它解决方案配置 22 resolve: { 23 root: 'E:/github/flux-example/src', //绝对路径 24 extensions: ['', '.js', '.json', '.scss'], 25 alias: { 26 AppStore : 'js/stores/AppStores.js', 27 ActionType : 'js/actions/ActionType.js', 28 AppAction : 'js/actions/AppAction.js' 29 } 30 }, 31 //插件项 32 plugins: [ 33 new webpack.BannerPlugin('This file is created by zhaoda'),//文件头部添加注释信息 34 new ExtractTextPlugin("style4.css") //提取出来的样式放在style.css文件中 35 ] 36 }
开发环境
当项目逐渐变大,webpack 的编译时间会变长,可以通过参数让编译的输出内容带有进度和颜色。
$ webpack --progress --colors
如果不想每次修改模块后都重新编译,那么可以启动监听模式。开启监听模式后,没有变化的模块会在编译后缓存到内存中,而不会每次都被重新编译,所以监听模式的整体速度是很快的。
$ webpack --progress --colors --watch打发打发
当然,使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器,并且会以监听模式自动运行 webpack,在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
# 安装
$ npm install webpack-dev-server -g
# 运行
$ webpack-dev-server --progress --colors
一般情况下,webpack 如果出问题,会打印一些简单的错误信息,比如模块没有找到。我们还可以通过参数 --display-error-details 来打印错误详情。
$ webpack --display-error-details
更多内容请查看 Webpack 中文指南