资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/和webpack打个照面——安装及配置

和webpack打个照面——安装及配置

stdying / 3336人阅读

 webpack  安装

命令行输入

</>复制代码 
  1. npm install webpack

配置文件 webpack.config.js

</>复制代码 
  1. moudule.exports = {
  2.   //Import 入口文件
  3.   entry: "./entry.js",
  4.   //Output dir 输出目录
  5.   output: {
  6.     path: "",//当前目录标识：__dirname
  7.     filename: ""
  8.   }
  9.   //dependency 依赖模块
  10.   module: {
  11.     loaders: [
  12.       {
  13.         test:/.css$/,
  14.         loader: "style!css"
  15.       }//规定某种文件类型的加载模块
  16.     ]
  17.   }
  18. }
 模块化 
</>复制代码 
  1. //遵循CMD规范
  2. var something = "something";
  3. module.exports = something;
 引入模块
 常规模块
</>复制代码 
  1. var st = require("something");
  2. console.log(st);//"something"
 引入CSS模块

1. style.css

</>复制代码 
  1. body {
  2.   background: #f00;
  3. }

2. CSS模块引入

</>复制代码 
  1. require("style!css!./style.css");

3. 安装style-loader，css-loader

</>复制代码 
  1. npm install style-loader css-loader

4. 在项目配置中配置.css类型的加载器

</>复制代码 
  1. //在配置文件的module属性的loaders数组中加入一个配置
  2. {
  3.   test: /.css$/,
  4.   loader: "style!css"
  5. }
 调试工具

1. 启用devtool插件，并用source-map跟踪模块

</>复制代码 
  1. webpack --devtool source-map

2. 在配置文件中插入devtool的配置属性

</>复制代码 
  1. //在webpack.config.js返回的配置模块中加入一对键值
  2. devtool: "source-map"
 服务器插件

1. 安装webpack-dev-server

</>复制代码 
  1. npm install webpack-dev-server

2. 在项目目录下运行

</>复制代码 
  1. webpack-dev-server

这样执行时会默认的使用iframe模式，即在服务器提供的框架内进行自动刷新页面，需要访问localhost:8080/webpack-dev-server目录下的对应网页，如果要在localhost:8080下执行自动刷新，应当使用--inline模式，在命令行输入

</>复制代码 
  1. webpack-dev-server --inline
 支持ES6

1. 安装babel插件

</>复制代码 
  1. //将babel相关的模块都安装
  2. npm install babel-loader babel-core babel-preset-es2015 --save-dev

2. 在配置文件中的进行配置

</>复制代码 
  1. //在配置文件中加入一个新的loader字段
  2. {
  3.   test: /.js$/,
  4.   loader: "babel"
  5. }

3. 建立并配置.babelrc文件

</>复制代码 
  1. //在.babelrc文件中直接输入
  2. {
  3.   "presets": ["es2015"]
  4. }

PS：这样配置会使所有的.js文件进行一次转换

 图片压缩

这里的图片压缩是将超过限制（自定义）的图片转换成base64编码的文档。

1. 需要的插件为url-loader,而该插件依赖于file-loader，如果没有，二者都需要安装。

</>复制代码 
  1. //先安装file-loader（如果没有）
  2. npm install file-loader --save-dev
  3. //安装url-loader
  4. npm install url-loader --save-dev

2. 添加loaders字段

</>复制代码 
  1. {
  2.   test: /.(jpg/png/gif)$/,
  3.   loader: "url-loader?limit=10000"
  4. }//limit为文件大小限制,单位为bit
 文件打包分离

下载extract-text-webpack-plugin来实现css文件的打包

1. 下载插件

</>复制代码 
  1. npm install extract-text-webpack-plugin --save-dev

2. 配置etwp

</>复制代码 
  1. //在配置文件中新建一个etwp的实例
  2. var etwp = new require("extract-text-webpack-plugin");
  3. //在plugins字段中引入
  4. plugins: [
  5.   etwp
  6. ]
  7. //在loaders字段中加入
  8. {
  9.   test: /.css$/,
  10.   loader: etwp.extract("styles.css")//切记是调用etwp中的extract方法
  11. }
 实现common.js的生成

common.js是将各个页面中的公共模块提取出来组成的集合，减少了模块的重复调用

配置方法

</>复制代码 
  1. //在配置文件中
  2. var buildCommon = new require("webpack.optimize.CommonsChunkPlugin");
  3. //配置不同的buddle.js输出
  4. entry: {
  5.   page1: "./js/entry.js",
  6.   page2: "./js/entry2.js"
  7. }
  8. //在plugins字段中加入
  9. plugins: [
  10.   buildCommon("common.js")
  11. ]
</>复制代码 
  1. webpack官网
    webpack中文文档
    原文链接
云服务器 GPU云服务器 安装及配置服务器 安装及配置服务器系统 配置和安装 lamp安装和配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80816.html

相关文章

  • webpack -> vue Component 从入门到放弃（一）

    摘要：本身也是运行在环境中的模块，它通常会返回一个函数。这个命名规则和搜索优先级顺序在的中定义。那就等下一篇介绍吧，一篇文章有太多内容，会让人很乏的从入门到放弃四从入门到放弃二从入门到放弃三源代码 此篇文章仅仅是整理自己接触webpack的入门过程，可能有很多不正确的地方，希望大家谅解，并指出错误帮助改进。 对于webpack的介绍和前期对他的入门使用，我觉得官方（中文网）已经介绍的很简单了...

    Ashin 评论0 收藏0

  • multipages-generator今日发布?！妈妈再也不用担心移动端h5网站搭建了！

    摘要：本文适合的读者现在在手淘，京东，今日头条，美柚等过亿用户的手机中的，都常见网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个的例子手淘，美柚。 本文适合的读者?‍?‍?‍? 现在在手淘，京东，今日头条，美柚等过亿用户的手机app中的，都常见h5网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个h5的例子：（手淘，美柚）。这些app中都嵌者数以百计，千计的...

    xavier 评论0 收藏0

  • multipages-generator今日发布?！妈妈再也不用担心移动端h5网站搭建了！

    摘要：本文适合的读者现在在手淘，京东，今日头条，美柚等过亿用户的手机中的，都常见网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个的例子手淘，美柚。 本文适合的读者?‍?‍?‍? 现在在手淘，京东，今日头条，美柚等过亿用户的手机app中的，都常见h5网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个h5的例子：（手淘，美柚）。这些app中都嵌者数以百计，千计的...

    Kerr1Gan 评论0 收藏0

  • multipages-generator今日发布?！妈妈再也不用担心移动端h5网站搭建了！

    摘要：本文适合的读者现在在手淘，京东，今日头条，美柚等过亿用户的手机中的，都常见网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个的例子手淘，美柚。 本文适合的读者?‍?‍?‍? 现在在手淘，京东，今日头条，美柚等过亿用户的手机app中的，都常见h5网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个h5的例子：（手淘，美柚）。这些app中都嵌者数以百计，千计的...

    doodlewind 评论0 收藏0

发表评论

登陆后可评论

0条评论

stdying

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<