webpack(1)-初见

2018-06-10 18:08:07

总字数 779

预计阅读时间 3 分钟

现在越来越多的JS代码被用在页面上 , 如何去很好地组织这些代码 , 成为了一个必须要解决的问题
不止有JS需要被模块化管理 , 前端当中很多的图片 css样式 , 都是需要被统一管理 , 方便进行扩展和维护的

所以webpack有如下几个目标 :

将依赖树拆分
保证初始加载的速度
所有静态资源可以被模块化
可以整合第三方的库和模块
可以构造大型项目

使用方法 :

安装

全局安装 npm install webpack -g
项目初始化
npm init - 生成一个package.json文件
npm install webpack --save-dev - 添加webpack依赖

webpack的配置

每个项目下都必须有一个webpack.config.js , 它就相当于webpack的一个配置文件 , 告诉webpack该做什么

这里先写一个最基本的可用配置
其实还有很多的配置项 , 具体可以查看官方文档

module.exports = {
  //页面入口文件配置
  //相当于执行这个JS文件可以直接或间接找到项目中用到的所有模块
  entry: {
    index : './src/entry.js'
  },
  //入口文件输出配置
  //最终要打包生成什么名字的文件, 放在哪里
  output: {
    path: __dirname,//表示当前目录
    filename: 'bundle.js'
  },
  module: {
    //加载器配置
    //告诉webpack每一种类型文件都需要使用什么加载器来处理
    loaders: [
      { test: /\.css$/, loaders: ["style-loader","css-loader"] }
    ]
  }
};

现在可以在项目当中创建src目录 , 并在其中创建entry.js文件和content.js文件

content.js

1 2	//这个文件相当于项目中所用到的一个模块 module.exports = "现在的内容来自于content.js文件";

entry.js

1 2	//这是我们定义的入口文件, 引用content模块 document.write(require("./content.js"));

在项目目录下执行webpack命令
可以看到在项目目录下生成了打包后的bundle.js

编写页面html文件

<html>
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

然后可以访问页面 , 看到JS被正确执行了

使用加载器

可以使用加载器去加载一个CSS文件 , 在页面中就不需要对这个样式文件进行引入了
打包后的JS会执行把这个文件中包含的样式加入到页面当中的动作
需要安装css-loader和style-loader这两个模块

1	$ npm install css-loader style-loader --save-dev

然后编写自己的css文件
目录结构

1
2
3

body {
  background-color : #ccc;
}

修改entry.js文件 , 引入这个css文件

1 2	require("!style!css!./style/style.css"); document.write(require("./content.js"));

这里因为已经在配置文件中指定了.css文件所使用的加载器 , 所以也可以直接写require("./style/style.css")

css-loader是用于在JS当中加载CSS文件
style-loader是用于将CSS文件的样式加载到页面当中

重新执行webpack命令即可
output