webpack上手攻略

今天，开始来做webpack的模块加载，打包了，昨天就提过之前看到的一句话：gulp 是 task runner，Webpack 是 module bundler。

Tips：
前端自动化：
1.自动编译（将less，sass等自动编译）
2.自动合并（将页面引入的多个js文件，或者css文件，合并为同一个且压缩）
3.自动刷新（IDE保存，浏览器不用刷新，自动看到效果）
4.自动部署（自动将项目打包部署到指定目录）
5.自动同步（能够方便实现多个浏览器窗口，同步点击，输入，调试）

gulp：任务定义和组织；基于文件 stream 的构建；插件体系；
webpack：按照模块的依赖构建目标文件；loader 体系支持不同的模块；插件体系提供更多额外的功能；

安装

首先还是安装，在项目内用常规的npm形式安装
全局安装webpack

npm install webpack -g

image.png

配置package.json / 手动输入配置项后会在项目根目录创建package.json。

npm init

image.png

局部安装webpack

npm install webpack –save-dev

image.png

配置

项目内需要配置webpack.congig.js。这个js文件的作用与我们昨天的gulpfile.js相似，用来配置webpack。
那么我们就来简单配置一个：

const webpack = require("webpack");
// const plugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
    // 源文件
    entry : {
      index : './src/index.js'
    },
    // 目标文件
    output : {
        filename: 'bundle/bundle.js'
    },
    module : {
        // 加载器
        loaders : [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader' }
        ]
    },
    //其它解决方案配置
    resolve: {
        extensions: ['.html', '.js', '.jsx']
    },
    // 插件项
    plugins : []
};

其中的加载器，我添加了，style-loader，css-loader，jsx-loader；所以还是需要通过npm安装他们。

image.png

然后直接运行webpack

image.png

我在indexjs里引入了appjs，这里可以清晰的看到，两个js都成功被创建。
index.html

index.js

const app = require('./app.js');
app();

app.js

module.exports = function() {
    console("this is a test");
};

bundle.js

image.png

界面上也很显示出了indexjs运行的结果：

image.png

然后我们也是涉及到了和gulp一样的问题，就是在码代码时自动刷新的问题了。
这里需要用webpack启一个本地的服务器，所以需要安装dev-server。

npm install –save-dev webpack-dev-server

然后需要在webpack.config.js中添加配置：

devServer: {
        contentBase: "./",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    }

然后在package.json中添加

"scripts": {
    "test": "test",
    "start": "webpack",
    "server": "webpack-dev-server"
  },

配置，这时可以用npm run server指令启动服务，默认端口依旧是8080，当然也可以在配置里修改端口。

image.png

这里可以看到页面已经建立了websocket连接。

image.png

然后修改app.js里面的代码：

module.exports = function() {
    console.log("this is a test");
    console.log("this is another test");
};

页面里也自动刷新为：

image.png

另外，也可以在package.json中配置start，用npm start进行打包，以及添加各种插件，进行模块化处理。这只是练手，之后用上了，踩了哪些坑再来接着更新。
以上。