webpack使用--基础

最新推荐文章于 2024-06-19 21:56:52 发布

Jancy1072

最新推荐文章于 2024-06-19 21:56:52 发布

阅读量521

点赞数 1

分类专栏：前端开发文章标签：模块化 webpack

本文链接：https://blog.csdn.net/shelly1072/article/details/65443384

版权

前端开发专栏收录该内容

46 篇文章 1 订阅

订阅专栏

webpack是一个打包工具，实现模块化，支持AMD和CommonJS。将一切文件当作模块。由于插件很多，可以实现部分构建任务，如开启服务器，页面自动刷新，编译less等。
1.安装工具
webpack是核心文件、wepback-dev-server是类http-server的web启动工具。
npm install –save-dev webpack webpack-dev-server

//基本命令
webpack         // 最基本的启动webpack的方法
webpack -w      // 提供watch方法；实时进行打包更新
webpack -p      // 对打包后的文件进行压缩
webpack -d      // 提供source map，方便调式代码

2.新建配置文件webpack.config.js

module.exports={
    entry:'./index.js',     //要写上当前目录下的index.js，否则会以为index.js是node_modules中的模块，到node_modules中加载，却找不到该模块
    output:{
        path:__dirname+'/dist',
        filename:'bundle.js'
    }
}

module.export：模块化
入口文件:entry，有几个页面就有几个entry，如果是单页面（spa)，一个entry就够了。
输出 output，path是输出路径，__dirname是nodejs的全局变量，表示当前目录， filename打包后的文件名。
3.小测试
总共有5个文件webpack.config.ks、index.js、index.html、style.css、package.json，编译好要使用的只有index.html和dist/bundle.js两个文件。

index.html

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

style.css

body{
    background-color: red;
}

index.js

console.log("hello world");
require('./style.css');//使用css

package.json

{
  "name": "webpack1",
  "version": "1.0.0",
  "description": "test webpack",
  "main": "index.js",
  "author": "Jancy",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --progress",
    "build": "webpack --progress"
  },
  "devDependencies": {
    "css-loader": "^0.27.3",
    "style-loader": "^0.16.0",
    "webpack": "^2.3.1",
    "webpack-dev-server": "^2.4.2"
  }
}

webpack.config.js

module.exports={
    entry:'./index.js',
    output:{
        path:__dirname+'/dist',
        filename:'bundle.js'
    },
    module:{
        loaders:[
            {
                test:/\.css$/,
                loaders:['style-loader','css-loader']
            }
        ]
    }
}

//加载器可以使用!连接，以前的版本可以省略loader几个字母，现在不可以了
{
    test:/\.scss$/,
    loaders:'style-loader!css-loader'
}

模块下定义loaders去loader需要的东西，它是一个数组，意味着它可以定义多个。
一个对象就是一个loader，test用正则匹配文件后缀。
loaders指定采用哪个loader,注意它是从右往左执行，所以这里先执行css-loader 。
css-loader处理css的一些url，包括相对的绝对的之类的东西。
style-loader 是将css文件采用js动态写入html页面。

执行命令 npm run start，浏览器打开localhost:8080/index.html，可以看到页面效果。此时的bundle.js是空的，因为它保存在内存中，没有写入硬盘，操作系统也能够根据文件名找到该文件的内容。

执行命令npm run build,生成打包文件bundle.js。在dist/目录下。要重新修改index.html中的路径。

Jancy1072

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack使用--基础

webpack是一个打包工具，实现模块化，支持AMD和CommonJS。将一切文件当作模块。由于插件很多，可以实现部分构建任务，如开启服务器，页面自动刷新，编译less等。 1.安装工具 webpack是核心文件、wepback-dev-server是类http-server的web启动工具。 npm install –save-dev webpack webpack-dev-server
复制链接

扫一扫

专栏目录