webpack配置笔记

栏目: 编程工具 · 发布时间: 5年前

内容简介:在根目录下创建两个文件夹创建三个文件在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')
    ]
}
复制代码

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

查看所有标签

猜你喜欢:

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

图解CIO工作指南(第4版)

图解CIO工作指南(第4版)

[日] 野村综合研究所系统咨询事业本部 / 周自恒 / 人民邮电出版社 / 2014-3 / 39.00

《图解CIO工作指南(第4版)》是一本实务手册,系统介绍了企业运用IT手段提高竞争力所必需的管理方法和实践经验,主要面向CEO或CIO等企业管理人士。 《图解CIO工作指南(第4版)》分为三个部分。第1部分的主题为IT管理,着重阐述运用IT技术提高企业竞争力所必需的所有管理业务,具体包括制定作为企业方针的IT战略,以及统筹执行该战略时与IT相关的人力、物力、财力、风险等要素在内的一系列管理业......一起来看看 《图解CIO工作指南(第4版)》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具