Webpack 安装教程

简介: Webpack 安装教程

Webpack 是一个前端资源加载/打包工具。


安装 Webpack

使用 cnpm 安装 webpack:


cnpm install webpack -g


创建项目

接下来我们创建一个目录 app:

mkdir app


在 app 目录下添加 runoob1.js 文件,代码如下:

app/runoob1.js 文件
document.write("It dashu.");
app/index.html 文件
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>


接下来我们使用 webpack 命令来打包:

webpack dashu.js bundle.js


配置文件

app/webpack.config.js 文件
module.exports = {
    entry: "./dashu.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};


插件

cnpm install webpack --save-dev


安装

cnpm install webpack-dev-server -g


运行

webpack-dev-server --progress --colors

相关文章
|
7月前
|
缓存 JavaScript 前端开发
webpack超详细教程,学webpack看这一篇就够了!(下)
webpack超详细教程,学webpack看这一篇就够了!(下)
|
7月前
|
缓存 JSON 前端开发
webpack超详细教程,学webpack看这一篇就够了!(上)
webpack超详细教程,学webpack看这一篇就够了!(上)
|
JavaScript 数据安全/隐私保护
Webpack 安装使用(详细步骤)
Webpack 安装使用(详细步骤)
131 1
|
JavaScript 数据安全/隐私保护
Webpack 安装
Webpack 安装
71 0
|
缓存 资源调度 前端开发
Webpack 2 入门教程
Webpack 2 入门教程
46 0
|
缓存 JSON 自然语言处理
webpack 笔记
1.1 webpack 五个核心概念 1.1.1 Entry 入口,指示webpack以哪个文件为入口起点开始打包,分析构建内部依赖图
105 0
|
前端开发 JavaScript API
webpack的安装和使用
为前端工程化而生:webpack致力于解决前端工程化,特别是浏览器端工程化中遇到的问题,让开发者集中注意力编写业务代码,而把工程化过程中的问题全部交给webpack来处理
|
前端开发 JavaScript
Webpack教程
Webpack教程
121 0
|
JSON 资源调度 JavaScript
Webpack5 入门(1):webpack简单使用
自 2012年3月10日诞生,Webpack 到今年已经是一个有着悠久历史的老牌构建工具了。 Webpack 基于 Node.js 开发,默认采用了 CommonJS 模块化规范。每一个文件都是一个模块,默认支持的模块类型有 `.js` 和 `.json`。对于其他类型的模块,比如 `.vue`,`.jsx`,`.ts`、`.css` 以及图片类型的模块,都需要安装对应的 `loader` 进行编译处理。
164 0
|
前端开发 JavaScript
webpack怎么安装和配置?
先全局安装 : npm i webpack webpack-cli -g 在工作文件夹 初始化 npm init -y 会出现一个package.json文件 在工作文件夹 根目录新建一个配置文件 ,js格式 webpack.