webpack配置笔记

内容简介：在根目录下创建两个文件夹创建三个文件在index.html文件中写入最基础的html代码

npm install -g webpack@3.5.3
// my-demo
npm init
npm install --save-dev webpack@3.5.3
复制代码

在根目录下创建两个文件夹

public
app

创建三个文件

index.html --放在public文件夹中
Greeter.js-- 放在app文件夹中
main.js-- 放在app文件夹中

在index.html文件中写入最基础的html代码

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

在Greeter.js中定义一个返回包含问候信息的html元素的函数

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};
复制代码

main.js文件中我们写入下述代码

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
复制代码

2. 正式使用

在根目录下新建一个名为webpack.config.js的文件，我们在其中写入如下所示的简单配置代码

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

在命令行中输入webpack即可打包

3.更快捷的执行打包任务

在package.json中对scripts对象进行相关设置即可，设置方法如下。

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "3.10.0"
  }
}
复制代码

在命令行输入 npm start 即可打包

二、生成Source Maps

1. Source Maps

Source Map则可以用于还原真实的出错位置，帮助开发者更快的Debug。

2. 配置

//webpack.config.js
module.exports = {
  devtool: 'eval-source-map', //新加入
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}
复制代码

三、使用webpack构建本地服务器

1. webpack-dev-server

构建本地服务器，实现自动刷新等功能

2. 配置

npm install --save-dev webpack-dev-server@2.7.1
复制代码

把这些命令加到webpack的配置文件中，现在的配置文件webpack.config.js如下所示

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } 
}
复制代码

在package.json中的scripts对象中添加如下命令，用以开启本地服务器：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
},
复制代码

终端输入npm run server即可

四、使用babel-loader

1. babel-loader

用于将使用ES6规范的js代码，转为ES5。

2. 配置

一次性安装这些依赖包

npm install --save-dev babel-core babel-loader babel-preset-env
复制代码

对文件进行配置

\\webpack.config.js
module.exports = {
  entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
      path: __dirname + "/public",//打包后的文件存放的地方
      filename: "bundle.js"//打包后输出文件的文件名
  },
  devtool: 'eval-source-map',
  devServer: {
      contentBase: "./public",//本地服务器所加载的页面所在的目录
      historyApiFallback: true,//不跳转
      inline: true//实时刷新
  },
  module: {
      rules: [
          {
              test: /(\.jsx|\.js)$/,
              use: {
                  loader: "babel-loader",
                  options: {
                      presets: [
                          "env"
                      ]
                  }
              },
              exclude: /node_modules/
          }
      ]
  }
};
复制代码

四、使用css-loader 和 style-loader

1. css-loader 和 style-loader

css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

2. css-loader 和 style-loader

安装

npm install --save-dev style-loader css-loader
复制代码

配置

module.exports = {
  entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
      path: __dirname + "/public",//打包后的文件存放的地方
      filename: "bundle.js"//打包后输出文件的文件名
  },
  devtool: 'eval-source-map',
  devServer: {
      contentBase: "./public",//本地服务器所加载的页面所在的目录
      historyApiFallback: true,//不跳转
      inline: true//实时刷新
  },
  module: {
      rules: [
          {
              test: /(\.jsx|\.js)$/,
              use: {
                  loader: "babel-loader",
                  options: {
                      presets: [
                          "env"
                      ]
                  }
              },
              exclude: /node_modules/
          },
          {
            test: /\.css$/,
            use: [
                {
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }
            ]
          }
      ]
  }
};
复制代码

使用

// app/main.css
html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, p, ul {
  margin: 0;
  padding: 0;
}
复制代码

我们这里例子中用到的webpack只有单一的入口，其它的模块需要通过 import, require, url等与入口文件建立其关联，为了让webpack能找到”main.css“文件，我们把它导入”main.js “中，如下

//main.js
import Greeter from './Greeter';
import './main.css';//使用require导入css文件
复制代码

五、使用CSS module

1. CSS module

所有的类名，动画名默认都只作用于当前模块

2. 安装

配置

module.exports = {

    ...

    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true, // 指定启用css modules
                            localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
                        }
                    }
                ]
            }
        ]
    }
};
复制代码

五、使用CSS预处理器

1. 使用CSS预处理器

Sass 和 Less 之类的预处理器是对原生CSS的拓展，它们允许你使用类似于variables, nesting, mixins,inheritance等不存在于CSS中的特性来写CSS。 postcss-loader 和 autoprefixer（自动添加前缀的插件）

2. 安装

npm install --save-dev postcss-loader autoprefixer
复制代码

//webpack.config.js
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    }
}
复制代码

// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}
复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

500 Lines or Less

Amy Brown、Michael DiBernardo / 2016-6-28 / USD 35.00

This book provides you with the chance to study how 26 experienced programmers think when they are building something new. The programs you will read about in this book were all written from scratch t......一起来看看《500 Lines or Less》这本书的介绍吧!

码农工具

HTML 压缩/解压工具

在线压缩/解压 HTML 代码

在线进制转换器

各进制数互转换器