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

相关文章
|
6月前
|
缓存 JavaScript 前端开发
webpack超详细教程,学webpack看这一篇就够了!(下)
webpack超详细教程,学webpack看这一篇就够了!(下)
|
6月前
|
缓存 JSON 前端开发
webpack超详细教程,学webpack看这一篇就够了!(上)
webpack超详细教程,学webpack看这一篇就够了!(上)
|
6月前
|
安全 前端开发 中间件
webpack开发环境
webpack开发环境
55 0
|
JavaScript 数据安全/隐私保护
Webpack 安装使用(详细步骤)
Webpack 安装使用(详细步骤)
116 1
|
JavaScript 数据安全/隐私保护
Webpack 安装
Webpack 安装
67 0
|
缓存 资源调度 前端开发
Webpack 2 入门教程
Webpack 2 入门教程
43 0
|
前端开发 JavaScript API
webpack的安装和使用
为前端工程化而生:webpack致力于解决前端工程化,特别是浏览器端工程化中遇到的问题,让开发者集中注意力编写业务代码,而把工程化过程中的问题全部交给webpack来处理
|
前端开发 JavaScript
Webpack教程
Webpack教程
113 0
|
资源调度 前端开发 JavaScript
Webpack之知识初探索,搭建一个简单的webpack开发环境
Webpack之知识初探索,搭建一个简单的webpack开发环境
106 0
|
缓存 资源调度 前端开发
Webpack 开发环境选择
为了提高开发效率,我们会选择一个可监听文件的修改、可重新编译、并且可以自动刷新浏览器,这样可能还不满足,我们还需要热更新(HMR),避免页面状态丢失。
162 0