webpack简单使用

Posted 2020-08-28 梦见一只电子羊

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack简单使用相关的知识，希望对你有一定的参考价值。

1 首先npm init 建立package.json文件 npm init

2 然后全局安装webpack npm install webpack -g

3 在项目下安装webpack npm install webpack --save-dev

4 安装依赖模块 npm install --save-dev style-loader css-loader npm url-loader svg-url-loader --save-dev

5 编写webpack.config.js配置

var webpack = require(\'webpack\');

module.exports = {
    entry: __dirname+\'/js/entry.js\',
    output: {
        path: __dirname+\'/js\',
        filename: \'bundle.js\'
    },
    module: {
        loaders: [
            {test: /\\.css$/,loader: \'style-loader!css-loader\'},
            {test: /\\.(png|jpg|gif)$/, loader: \'url-loader?limit=8192\'},
            {test: /\\.svg/, loader: \'svg-url-loader\'}
        ]
    }
};

编写entry.js入口：

require("!style!css!./style.css");
function calc(a,b){
    var plus = require("./plus.js");
    var sum = require("./sum.js");
    return sum(sum(a,b),plus(a,b))
}
document.write("The result is   ");
document.write(calc(2,3));

编写sum.js plus.js css:

function sum(a,b){
    return a+b;
}
module.exports=sum;

function plus(a,b){
    return a+2+b;
}
module.exports=plus;

body{
    background-color: #ffffff;
}

编写html,bundle.js在运行webpack命令会出现

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

运行webpack命令后打开index

webpack构建本地服务器实现自动刷新：

npm install --save-dev webpack-dev-server

webpack.config.js中添加配置：

module.exports = {
  devtool: \'eval-source-map\',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

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

package.json的scripts中添加配置：

"scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  },

此时运行npm run server即可在看到刷新

以上是关于webpack简单使用的主要内容，如果未能解决你的问题，请参考以下文章

如何使用webpack加载库源映射？

WebPack 简单使用

Vue报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法(代码片段

webpack: 简单分析 webpack 打包后的代码

创建自己的代码片段（CodeSnippet）

为啥这段代码会泄露？（简单的代码片段）