webpack学习笔记_入门基础

最新推荐文章于 2024-09-21 14:49:00 发布

鬼怪毁坏

最新推荐文章于 2024-09-21 14:49:00 发布

阅读量671

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/abluel1126/article/details/70232027

版权

1、首先将全局安装或安装到目录
1.一种是全局安装(确认是否安装成功)

npm install -g webpack

2.另一种是安装到目录（首先cd 到目录下）

npm install --save-dev webpack

3.生成配置文件package.json

npm init

或者手动生成配置文件，其中配置项暂时不设置

2、需要两个文件夹，例app存放将要写的原始数据等，public存放将开放给浏览器读取的文件
在app文件夹下
1.geeter.js 包含将展示在浏览器的文字

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hello World";
  return greet;
};

2.main.js greeter模块插入到dom中

var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());

在public文件夹下
index.html 浏览器展示页面，主页面，正常html页面，作用是引入最后生成的js，，暂定为bundle.js

<body>
    <div id="root">

    </div>
    <script src="bundle.js"></script>
</body>

开始使用webpack
1、命令行执行
如果是全局安装webpack

// webpack {唯一的入口文件} {生成的文件位置以及名字}
webpack app/main.js public/bundle.js

如果是本目录下安装，将webpack替换为node_modules/.bin/webpack即可
2、手动配置webpack.config.js 【type NUL > 文件夹】(node创建新文件)

module.exports = {
    //__dirname  node.js中的全局变量  指向当前执行脚本所在的目录
    entry: __dirname + "/app/main.js",//唯一入口文件
    output: {
        path: __dirname + "/public",//打包后存放的路径
        filename: "bundle.js"      //打包的文件名
    }
}

然后命令行 webpack ，目录安装同理
效果：在页面展示出了geeter中的文字
更加快捷

npm start 执行

"scripts": {
    "start": "webpack" //配置的地方就是这里啦，相当于把npm的start命令指向webpack命令
  },

执行的时候注释会报错，删掉

webpack功能
1、Source Maps (只是在开发阶段使用它)
需要配置 devtool 选项
devtool选项配置结果
这四种配置结果速度从上往下越来越快负面作用也越大
1) source-map 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度；

2) cheap-module-source-map 在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；

3) eval-source-map 使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项；

4) cheap-module-eval-source-map 这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；

module.exports = {
  devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

使用webpack搭建本地服务器
安装组件

npm install --save-dev webpack-dev-server

加入到webpack的配置文件中

devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    //colors: true,//终端中输出结果为彩色  <!>有问题
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  }

1） contentBase：默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public”目录）
2） port 设置默认监听端口，如果省略，默认为”8080“
3） inline 设置为true，当源文件改变时会自动刷新页面
4） colors 设置为true，使终端输出的文件为彩色的
5）historyApiFallback 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
遇到问题
在配置中写入colors的时候，启动失败，将colors去掉，启动成功
启动成功后 localhost：8080 打开页面

loaders
Loaders需要单独安装
需要在 webpack.config.js 下的 modules 关键字下进行配置，Loaders的配置选项包括以下几方面：

test：一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
loader：loader的名称（必须）后缀必须加上-loader
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）
例子：首先试一下

//安装可以装换JSON的loader
npm install --save-dev json-loader

创建带有问候信息的JSON文件(命名为config.json)

//config.json
{
  "greetText": "Hi there and greetings from JSON!"
}

module: {//在配置文件里添加  JSON loader
    loaders: [
      {
        test: /\.json$/,
        loader: "json-loader"
      }
    ]
  },

之后可以更改前面创建的geeter.js中的配置

var config = require('./config.json');

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = config.greetText;
  return greet;
};

Babel 重点内容

1、下一代的JavaScript标准（ES6，ES7），这些标准目前并未被当前的浏览器完全的支持；可以用来转换ES6代码

2、使用基于JavaScript进行了拓展的语言，比如React的JSX

用得最多的是
1）解析 Es6 的 babel-preset-es2015 包
2）解析 JSX 的 babel-preset-react 包

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

//2017.4.18

//2017.4.20 补充

今天继续学webpack
前段时间在学vue的路由，需要转换es6，然后一脸懵逼，赶紧查了一下，现在就来试试
Babel的配置选项
为了防止wabpack.config.js中的配置太复杂，一般会将babel的配置选项放在.babel中
webpack会自动调用.babelrc中的babel配置方法
可以命令行 type NUL > .babelrc

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader'
}

在写入json文件的时候，在json文件第一行写了句注释，结果一致报错，模块建立失败，去掉注释以后引入成功了。

测试了一下以前使用import不能使用的es6语法，现在也可以使用了，期待去学vue的路由了~

处理样式表工具

npm install -g style-loadr css-loader

 {
        test: /\.css$/,
        loader: 'style-loader!css-loader'//添加对样式表的处理
      }

感叹号的作用就是使得同一个文件可以使用不同的loader
1、css-loader
可以让我们的样式像import或者url（。。）等，加载模块一样的加载进来类似require（）
在app文件夹下建立一个main.css由于webpack只有一个入口，可以将main.css import进来
2、style-loader
将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中

css预处理器

相关loader
Less Loader
Sass Loader
Stylus Loader

有一个css的 PostCSS 处理平台，以后再深入先标记一下

接下来介绍Webpack中另一个非常重要的功能-Plugins

Plugins（插件）

要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组）

优化插件

webpack提供了一些在发布阶段非常有用的优化插件，它们大多来自于webpack社区，可以通过npm安装，通过以下插件可以完成产品发布阶段所需的功能

OccurenceOrderPlugin :为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
UglifyJsPlugin：压缩JS代码；
ExtractTextPlugin：分离CSS和JS文件

npm install --save-dev extract-text-webpack-plugin

plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/app/index.tmpl.html"
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin("style.css")
  ]

缓存
webpack可以把一个哈希值添加到打包的文件名中，使用方法如下,添加特殊的字符串混合体（[name], [id] and [hash]）到输出文件名前

output: {
    path: __dirname + "/build",
    filename: "[name]-[hash].js"
  },

到这里，大概是对webpack了解了一下，但是学下来还是一圈懵的感觉，总结一下，知道了webpack可以用来打包，模块化、转换语法、合并代码，css预处理器，使得一些不能被浏览器直接识别的拓展语言转换并打包为合适的格式，以后还会了解更多，更加深入，争取应用到项目上，加油！

鬼怪毁坏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫