webpack 自我总结学习模版,自己看.

2023年10月9日 179次阅读

自我总结的一套webpack，前端变化异常迅猛，都是眼泪。不愿意把记忆力全部用来记环境配置，所以记录方法过程。

不配置webpack连github优秀的轮子都用不了，吐槽一下。

我对webpack的理解源于三篇文章

运行 webpack 出错：Cannot find module ‘webpack/lib/node/NodeTemplatePlugin’
原理是 装全局的 webpack，会出现路径错误。 悲催0 0

项目目录下，删除全局，下载一个项目的。
npm remove webpack -g
npm i webpack --save-dev

//终端报错 HtmlwebpackPlugin模块的报错

Invalid configuration object. webpack-dev-server has been initialised using a configuration object that does not match the API schema.
configuration has an unknown property ‘colors’. These properties are valid:
//这个配置删除了colors: true,//终端中输出结果为彩色

  • webpack简单点来说就就是一个配置文件，所有的魔力都是在这一个文件中发生的。 这个配置文件主要分为三大块
    • entry 入口文件 让webpack用哪个文件作为项目的入口
    • output 出口 让webpack把处理完成的文件放在哪里
    • module 模块 要用什么不同的模块来处理各种类型的文件

正文开始

//新建一个文件，就是项目的根文件
npm init //配置一些package.json 包管理模块
// 安装Webpack
npm install --save-dev webpack

现在项目里面就有一个package.json， 我们多加一点东西，慢慢丰富它的内容。

  • /app
    • index.js
    • sub.js
    • indexhtml.html
  • package.json
  • webpack.config.js

JS代码

sub.js

//我们这里使用CommonJS的风格
function generateText() {
  var element = document.createElement('h2');
  element.innerHTML = "Hello h2 world";
  return element;
}
module.exports = generateText;

index.js

var sub = require('./sub');
var app  = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>';
app.appendChild(sub());
document.body.appendChild(app);

配置Webpack
现在开始配置webpack，目标是把这两个js文件合并成一个文件. 我们可以自己在build文件夹里面手动建一个index.html文件夹，然后再把合并以后的js引用在里面，但是这样有些麻烦，所以我们这里安装一个plugin，可以自动快速的帮我们生成HTML。

npm install html-webpack-plugin --save-dev//此模块帮我们生成html

在webpack 以下内容

var HtmlwebpackPlugin = require('html-webpack-plugin');

module.exports = {
  //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
  entry: __dirname + "/app/index.js",
  //输出的文件名 合并以后的js会命名为bundle.js
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },

  //添加我们的插件会自动生成一个html文件
  plugins: [
    new HtmlwebpackPlugin({
       template: __dirname + "/app/indexhtml.html"//html模版地址
     })
  ]
};

配置webpack-dev-server，自动刷新浏览器
安装webpack-dev-server

npm install webpack-dev-server --save-dev

在webpack 修改为

var HtmlwebpackPlugin = require('html-webpack-plugin');

module.exports = {
  //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
  entry: __dirname + "/app/index.js",
  //输出的文件名 合并以后的js会命名为bundle.js
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },

  //添加我们的插件会自动生成一个html文件
  plugins: [
    new HtmlwebpackPlugin({
       template: __dirname + "/app/indexhtml.html"//html模版地址

     })
  ],

  //node服务器，实时预览
  devServer: {
    contentBase: __dirname + "/build",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//当源文件改变时会自动刷新页面
    port:8080//端口
  }
};

然后再package.json里面配置一下运行的命令,npm支持自定义一些命令

"scripts": {
  "start": "webpack-dev-server --hot --inline"
},

好了，万事具备了，在项目根目录下输入
npm start
在浏览器里面输入[http://localhost:8080**]

Babel

Babel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过编译帮你达到以下目的：

下一代的JavaScript标准（ES6，ES7），这些标准目前并未被当前的浏览器完全的支持；
使用基于JavaScript进行了拓展的语言，比如React的JSX
Babel的安装与配置

Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，不过webpack把它们整合在一起使用，但是对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

// npm一次性安装多个依赖模块，模块之间用空格隔开

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

在webpack中配置Babel的方法如下

var HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
  //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
  entry: __dirname + "/app/index.js",
  //输出的文件名 合并以后的js会命名为bundle.js
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },
  //添加我们的插件会自动生成一个html文件
  plugins: [
    new HtmlwebpackPlugin({
       template: __dirname + "/app/indexhtml.html"//html模版地址
     })
  ],

  //node服务器，实时预览
  devServer: {
    contentBase: __dirname + "/build",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//当源文件改变时会自动刷新页面
    port:8080//端口
  },
  //babel 的配置， ES6 与React
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015','react']
        }
      }
    ]
  }
};

现在你的webpack的配置已经允许你使用ES6以及JSX的语法了。
记得先安装 React 和 React-DOM

npm install --save react react-dom

已经完成

个人博客： www.liangtongzhuo.com

点赞