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:

翻墙试试，或者用淘宝提供的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 内容

var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin');//css样式从js文件中分离出来,需要通过命令行安装 extract-text-webpack-plugin依赖包
module.exports = {
    ////页面入口文件配置
    entry: './entry.js',
    //入口文件输出配置
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        //加载器配置
        loaders: [
            {test: /.css$/, loader:ExtractTextPlugin.extract("style", 'css')},
            {
                test: /.scss$/,
                loader: ExtractTextPlugin.extract("style", 'css!sass')  //ExtractTextPlugin.extract("style", 'css!sass') 这里用了样式分离出来的插件，如果不想分离出来，可以直接这样写 loader:'style!css!sass'
            }
        ]
    },
    //其它解决方案配置
    resolve: {
        root: 'E:/github/flux-example/src', //绝对路径
        extensions: ['', '.js', '.json', '.scss'],
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    },
    //插件项
    plugins: [
        new webpack.BannerPlugin('This file is created by zhaoda'),//文件头部添加注释信息
        new ExtractTextPlugin("style4.css") //提取出来的样式放在style.css文件中
    ]
}

开发环境

当项目逐渐变大，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 中文指南