webpack超简易入门安装

时间 2019-12-05

标签 webpack 简易入门安装繁體版

原文原文链接

webpack是当今很火的打包构建工具，包含了大部分主流html，css，图片处理框架，能够进行预编译语言的处理，代码的压缩功能等等，废话很少说，进入正题。css

您须要先学习/配置如下内容

nodejs安装:http://www.runoob.com/nodejs/...
nodejs镜像配置:http://cnodejs.org/topic/4f99...
node模块化的文章:http://www.cnblogs.com/Leo_wl...html

ps : 为各位大佬奉上github地址：https://github.com/YexChen/we...node

安装webpack

基本环境配置

运行如下指令，初始化项目：webpack

npm init

以上安装一路回车便可，接下来安装全局和局部的webpack：
-g为全局安装，方便咱们用命令行指令，
-D为在开发环境的安装git

npm i -g webpack
npm i -D webpack

基本项目构建

接下来，开始构建咱们的项目吧，先建立几个基本的文件:github

app.js
index.html
module.js

app.js--webpack运行的入口程序
index.html--本示例中的网页文件
module.js--一个js模组web

修改入口程序

修改module.js为：npm

export default function(){
  document.write("module.js has been modified");
}
在这里，咱们经过export暴露了一个方法，在app.js里面咱们会调用这个方法。

修改app.js为:json

import module from "./module"

document.write("app.js has been add");

module();

app.js里咱们经过import方法导入了module.js中的包,并把module做为module.js中暴露出的函数。浏览器

最后，让咱们修改index.html,直接复制粘贴便可：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script src="./dist/bundle.js"></script>
</body>
</html>

也只是调用了一下dist目录下的bundle.js而已

咱们此时的目录结构应该为：

.
|-- app.js
|-- index.html
|-- module.js
|-- node_modules
|-- package-lock.json
`-- package.json

那么，让咱们运行一下吧，若是安装了全局webpack的话咱们能够运行：

webpack app.js dist/bundle.js

若是没有全局webpack的话咱们能够运行：

./node_modules/.bin/webpack app.js dist/bundle.js

执行完毕后打开index.html(双击),若是看到打印出内容为

app.js has been addmodule.js has been modified

那么恭喜你，第一步成功了

设置webpack配置文件

一直使用命令行很麻烦吧？webpack早就想到了这一点，webpack.config.js就是为此而生的

让咱们新建一个webpack.config.js文件，并设置内容为：

const path = require("path");

module.exports = {
  entry : "./app.js",
  output : {
    path : path.join(__dirname,"dist"),
    filename : "bundle.js"
  }
}

entry : 文件入口
output : 输出口

此时直接运行

webpack

或者

./node_modules/.bin/webpack

便可进行编译

webpack-dev-server

使用webpack-dev-server进行实时监听（监测代码改动）会让咱们的工做变得更加容易。

先安装webpack-dev-server:

npm i -D webpack-dev-server

而后再回到咱们的webpack.config.js文件，增长devServer项:

devServer : {
    port : 3000,
    publicPath : "/dist/"
  }

改动后的文件为：

const path = require("path");

module.exports = {
  entry : "./app.js",
  output : {
    path : path.join(__dirname,"dist"),
    filename : "bundle.js"
  },
  devServer : {
    port : 3000,
    publicPath : "/dist/"
  }
}

注意下publicPath为静态地址，由于在dist里面咱们生成了一个bundle.js，因此须要加这个，让文件能够被访问

好的，配置已经完成了，接下来咱们来运行一下

node_modules/.bin/webpack-dev-server

在浏览器中间访问localhost:3000,便可看到效果。此时咱们的代码已经被监听，您能够改一下app.js或者module.js中的内容，文件会实时响应与编译。

webpack loader css样式表

有时候，咱们须要加载样式表，在webpack中如何加入呢？

在根目录下建立index.css,修改内容以下：

html,body{
    background-color : yellowgreen
}

而后在app.js中添加以下代码：

import "./index.css"

app.js如今是这样的：

import module from "./module"
import "./index.css"

document.write("app.js has been addadsadas");

module();

而后打开网页，是否是报错啦？报错就对啦

在js文件中怎么能打开css文件呢？这时，就须要loader上场了

咱们安装一下

npm i -D css-loader

安装完之后，咱们还须要webpack知道咱们安装了这个模块：
修改webpack.config.js:

const path = require("path");

module.exports = {
  entry : "./app.js",
  output : {
    path : path.join(__dirname,"dist"),
    filename : "bundle.js"
  },
  module : {
    loaders : [
      {
        test : /\.css$/,
        loader : "css-loader"
      }
    ]
  },
  devServer : {
    port : 3000,
    publicPath : "/dist/"
  }
}

而后再编译一下，如今错误消失了，可是文件好像并无出来，这是为何呢？
咱们这里虽然使用了css-loader，可是并无让页面用上去，因此如今还须要另一个loader：style-loader

npm i -D style-loader

而后修改webpack.config.js:

const path = require("path");

module.exports = {
  entry : "./app.js",
  output : {
    path : path.join(__dirname,"dist"),
    filename : "bundle.js"
  },
  module : {
    loaders : [
      {
        test : /\.css$/,
        loader : "style-loader!css-loader"
      }
    ]
  },
  devServer : {
    port : 3000,
    publicPath : "/dist/"
  }

}

你们可能注意到了，loader中导入了两个loader，中间用！分割，webpack优先调用右边的，因此先运行css-loader处理文件，再运行style-loader

如今再次编译文件，看咱们的主页背景是否是变成原谅色了呢？