webpack简单使用

最新推荐文章于 2025-06-04 11:07:44 发布

原创最新推荐文章于 2025-06-04 11:07:44 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端构建

前端模块化开发专栏收录该内容

4 篇文章

订阅专栏

js模块加载示例：

1.安装webpack

2.webpack_demo\app\main.js

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

3.webpack_demo\app\Greeter.js

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

4.webpack_demo\public\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root' class="root">
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

5.在命令行下运行webpack

此时在public文件夹下生成了目标文件bundle.js：

6.运行index.html

通过配置文件来使用Webpack

webpack_demo\webpack.config.js：

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

注意：“__dirname”是Node.js中的一个全局变量，它指向当前执行脚本所在的目录。

这样就可以直接运行webpack了：

更快捷的执行打包任务

webpack_demo/package.json：

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack"
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
  }
}

这样可以在命令行下npm start来运行

Source Maps（使调试更容易）

开发总是离不开调试，如果可以更加方便的调试当然就能提高开发效率，不过打包后的文件有时候你是不容易找到出错了的地方对应的源代码的位置的，Source Maps就是来帮我们解决这个问题的。

如果我们的main.js编写错误：

webpack_demo/main.js:

var greeter = require('./Greeter.js');
document.getElementById('root1').appendChild(greeter());//id"root1"是不存在的

编译后在浏览器里运行：

可以看到，错误只能定位到编译后的文件，这是不利于我们程序开发。

在webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下：

devtool选项	配置结果
source-map	在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度；
cheap-module-source-map	在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；
eval-source-map	使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项；
cheap-module-eval-source-map	这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和`eval-source-map`选项具有相似的缺点；

正如上表所述，上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的构建速度的后果就是对打包后的文件的的执行有一定影响。在学习阶段以及在小到中性的项目上，eval-source-map是一个很好的选项，不过记得只在开发阶段使用它，继续上面的例子，进行如下配置：

webpack_demo/webpack.config.js：

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

编译后：

此时再运行浏览器：

此时就可以定位到具体哪里出错了。

JSON加载器

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

webpack_demo/webpack.config.js：

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
  module: {//在配置文件里添加JSON loader
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      }
    ]
  }
}

webpack_demo\app\Greeter.js:

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

webpack_demo\app\config.json

{
  "greetText": "Hi there and greetings from JSON!"
}

css加载器

webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。postcss-loader 是一个css预处理器，添加相应的依赖后可以实现相应的功能，如要实现自动添加前缀的功能，需要添加autoprefixer模块。

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

npm install --save-dev postcss-loader autoprefixer

module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      },
      {
        test: /\.css$/,
        loader: 'style!css!postcss'
      }
    ]
  },

  postcss: [
    require('autoprefixer')//调用autoprefixer插件
  ],

webpack_demo\app\Greeter.css:

@import url(flex.css);
#root{
  background-color: #eee;
  padding: 10px;
  border: 3px solid #ccc;
  display: flex;
}

webpack_demo\app\flex.css:

.root{
	display: flex;
}

编译后运行：

从运行的结果来看，postcss加载器前缀插件对用@import引入的css样式文件无效。

还有一点需要注意，style-loader和css-loader必须同时使用，如果只用style-loader，编译将报错

less加载器

npm install less-loader --save-dev

webpack_demo\app\less.less:

.mixin(){
	color:red;
	display:flex;
}
div.root{
	.mixin();
}

webpack_demo\webpack.config.js:

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
  module: {//在配置文件里添加JSON loader
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      },
      {
        test: /\.css$/,
        loader: 'style!css!postcss'//添加对样式表的处理
      },
      {test:/\.less$/,loader:'style-loader!css-loader!postcss!less-loader'}
    ]
  },
  postcss: [
    require('autoprefixer')//调用autoprefixer插件
  ],
}

编译后运行结果：

HtmlWebpackPlugin（简单模板插件）

npm install --save-dev html-webpack-plugin

webpack_demo\app\index.tmpl.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root' class="root">
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

webpack_demo\webpack.config.js:

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
  module: {//在配置文件里添加JSON loader
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      },
      {
        test: /\.css$/,
        loader: 'style!css!postcss'//添加对样式表的处理
      }
    ]
  },
  postcss: [
    require('autoprefixer')//调用autoprefixer插件
  ],
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
    })
  ],
}

编译后将在webpack_demo\public目录下生成index.html文件，其内容和index.tmpl.html的内容一样。