webpack上手攻略

来源：互联网发布：wind炒股软件编辑：程序博客网时间：2024/06/07 05:35

今天，开始来做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

这里写图片描述

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

npm init

这里写图片描述

局部安装webpack

npm install webpack –save-dev

这里写图片描述

配置

项目内需要配置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安装他们。

这里写图片描述

然后直接运行webpack

这里写图片描述

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>webpack</title></head><body></body><script src="bundle/bundle.js" charset="utf-8"></script></html>

index.js

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

app.js

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

bundle.js
这里写图片描述

界面上也很显示出了indexjs运行的结果：
这里写图片描述

然后我们也是涉及到了和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，当然也可以在配置里修改端口。
这里写图片描述

这里可以看到页面已经建立了websocket连接。
这里写图片描述

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

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

页面里也自动刷新为：
这里写图片描述

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

以上。

阅读全文

0 0