webpack--简单入门(2)

最新推荐文章于 2021-10-16 22:22:24 发布

mnixu

最新推荐文章于 2021-10-16 22:22:24 发布

阅读量3.2k

点赞数 1

分类专栏：开发工具文章标签： Webpack 开发工具

本文链接：https://blog.csdn.net/a1104258464/article/details/51968996

版权

开发工具专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.介绍

webpack仅仅只支持本地的javascript模块,但是像CSS，LESS，TypeScript，JSX，CoffeeScript，图片等静态文件模块，我们是可以通过模块加载器（webpack-loader）来统一管理的。Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。loaders之间是可以串联的，一个加载器的输出可以作为下一个加载器的输入，最终返回到JavaScript上。

2.安装

loader列表 http://webpack.github.io/docs/list-of-loaders.html

找到需要加载的语言例如 json

我们点击json 进去到loader-json github 进行安装

3.使用

创建一个上个博客一样的项目骨架。

安装需要的依赖:

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

//package.json
{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "mnixu",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.23.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.1"
  }
}

新建main.js：

//main.js
require('./style.css')

新建style.css：

//style.css
body {
    background: blue;
}

新建index.html：

//index.html
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="bundle.js"></script>
</head>
<body>
    <h1>hello world</h1>
</body>
</html>

新建webpack.config.js：

module.exports = { 
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module:{
      loaders:[
        { 
            test: /\.css$/,
            exclude: /node_modules/,     //编译除了node_modules文件夹以外的
            loader: 'style-loader!css-loader' //感叹号连接两个加载器，css-loader解析css文件 style-loader插入样式到html页面中
        },
      ]
  }
}

进行打包看到我们的页面背景变成蓝色了。

loaders列表 http://webpack.github.io/docs/list-of-loaders.html

4.插件

在webpack中我们可以通过使用插件来满足某些需求，例如我们可以用 UglifyJs Plugin 来输出一个压缩的文件

因为 UglifyJs Plugin是webpack自带的插件我们不需要依赖模块，但是在使用其他的插件时，我们可能需要依赖模块：

//index.html
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

//main.js
var thisIsLongName = "haha";
thisIsLongName += ' minixu' ;
document.write('<h1>' + thisIsLongName + '</h1>');

//webpack.config.js
var webpack = require('webpack');
module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
        })
    ]
}

进行打包后发现我们的bundle.js果然被压缩了！

插件列表 http://webpack.github.io/docs/list-of-plugins.html