webpack入门-CSDN博客

安装
- 安装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即可看到效果。