webpack入门

tobbyvic
152 阅读2分钟

  • 安装

    • 安装webpack

      全局npm install -g webpack或者项目内安装npm install --save-dev webpack

    • 尝试看是否安装成功

      webpack -h

    • 查看本机安装的全局包

      npm list -g --depth 0

  • 起步

    • 初始化工程文件夹

      npm init //此时会自动生成package.json

    • 在根文件夹下创建页面index.htlm及一个文件夹app

      • index.html
      <html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="./build/bundle.js"></script>
</body>
</html>
      • app中创建文件index.js
      // index.js
document.write('It works.')

    • 根文件夹下创建webpack.config.js文件

      var webpack = require('webpack')
var path = require('path');
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
module.exports = {
    //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
    entry: APP_PATH,
    //输出的文件名 合并以后的js会命名为bundle.js
    output: {
        path: BUILD_PATH,
        filename: 'bundle.js' //将app文件夹中的两个js文件合并成build目录下的bundle.js文件
    }
}

    • 执行命令webpack打开页面index.html即可看到结果

  • Loader

    • Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。 在webpack.config.js中加入module

      var webpack = require('webpack')
var path = require('path');
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
    //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
    entry: APP_PATH,
    //输出的文件名 合并以后的js会命名为bundle.js
    output: {
        path: BUILD_PATH,
        filename: 'bundle.js' //将app文件夹中的两个js文件合并成build目录下的bundle.js文件
    },
    //配置Loader，将不同的文件类型进行打包并在index.js中引入,注意这里loaders --> rules
    module: {
        rules: [
            { test: /\.css$/, loader: 'style-loader!css-loader' }
        ]
    }
}

    • 在app文件夹下创建style.css

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

      此时在入口文件index.js中引入

      // entry.js
require('./style.css') // 载入 style.css，在webpack.config.js中配置loader后就可以直接这样引入
document.write('It works.')//定义了一些文件夹的路径

      重新执行webpack即可看到效果。

  • 插件

    • 修改 webpack.config.js，添加 plugins：

      var webpack = require('webpack')

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  },
  //插件,这个插件是给输出的文件头添加注释信息
  plugins: [
    new webpack.BannerPlugin('This file is created by zhaoda')
  ]
}

      重新执行webpack即可看到效果。

  • 一些问题

1、require引入是遵循了commonJs的规范，如果有babel loader的话也可以用es6中的import 和export来进行处理，最后解析后还是require 可以看下

require，import区别

2、完整了解webpack可以查看如下文档

Webpack 中文指南

Webpack 簡介

注：以上仅为学习交流，如有疑问，请联系作者处理

avatar
文章
阅读
粉丝