webpack命令行总结

用 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 内容

 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 }

View Code