根据阮一峰老师的打包练习,然后我根据webpack4,自己从头摸索一遍。 https://github.com/ruanyf/webpack-demos

配置

  • 首先需要全局安装webpack, webpack-dev-server
  • npm i webpack -g & npm i -g webpack webpack-dev-server
  • npm install -g webpack-cli

可能报错点:

第三条如果没有全局安装会报一下错误,我按照提示npm install -D也没用,所以上面第三条要注意
webpack -v 
One CLI for webpack must be installed. These are recommended choices, 
delivered as separate packages

Demos

Demo1:从打包最简单的单js文件开始

  • 进入你的项目文件夹,npm init ,然后会自动生成package.json文件
  • 创建index.html,main.js,webpack.config.js文件
  • index.html中就在头部写一条script语句,引入将要打包成功的js文件     <script src="bundle.js"></script>
  • main.js(也可以取其它名字),作为入口文件,这里随便写点逻辑, document.write('<h1>Hell world</h1>')
  • 在webpack.config.js中进行配置,如下
const path = require('path')//引入path模块
module.exports = {
  entry: path.join(__dirname, 'main.js'),//入口配置
  output: {
    filename: 'bundle.js',//输出文件
    path: path.join(__dirname)//输出的路径
  }
}
//命令行 webpack 即可打包成功

Demo2:打包多个js文件

跟demo1基本一样,就是html中引入2条script标签,引入两个不同的js,关键是webpack.config.js的配置
//对象类型引入
const path = require('path')

module.exports = {
  entry: {
    bundle1: path.join(__dirname, 'main1.js'),//用对象方式传递2条要打包的文件
    bundle2: path.join(__dirname, 'main2.js')//也可以用数组
  },
  output: {
    filename: '[name].js'   //注意:使用[name]确保每个文件名都不重复
  }
}
//默认会生成dist文件夹,其下会生成刚才打包成功的bundle1和bundle2
//数组类型引入
const path = require('path')

module.exports = {
  entry: ['./main1.js','./main2.js'],
  output: {
    // filename: '[name].js'   //这样写会打包成main.js
       filename:'bundle.js' //打包成dist下bundle.js将两个入口文件打包合并了
  }
}

Demo3:打包jsx文件

  • html文件 <div id="wrapper"></div><script src="./dist/bundle.js"></script>
  • jsx文件:
//需要npm安装react,react-dom
const React = require('react');
const ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.querySelector('#wrapper')
);
  • webpack.config.js
module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {//babel配置
            presets: ['es2015', 'react'] }} } ]}}

module下rules的配置:

  1. 条件匹配:通过  test 、 include 、 exclude  三个配置项来命中 Loader 要应用规则的文件。
  2. 应用规则:对选中后的文件通过 use 配置项来应用 Loader,可以只应用一个 Loader 或者按照从后往前的顺序应用一组 Loader,同时还可以分别给 Loader 传入参数。 (loader是从后往前执行数组的)
  3. 重置顺序:一组 Loader 的执行顺序默认是从右到左执行,通过 enforce 选项可以让其中一个 Loader 的执行顺序放到最前或者最后。 (没什么必要..)

常见报错:

1.Plugin/Preset files are not allowed to export objects,only functions.webpack报错/babel报错

原因:babel-loader的版本跟babel-core版本不兼容

官网给的搭配版本是 babel-loader 8.x | babel-core 7.x

或者 babel-loader 7.x | babel 6.x

我这里直接用阮一峰老师的配置版本了

 "babel-core": "^6.26.3",    "babel-loader": "^7.1.2", (6-7组合)

最后 命令 webpack打包

Demo4:打包个css文件

  • 先npm安装2个loader,css-loader和style-loader
  • html,css,js文件同上,写点东西进去然后再html中引入
  • webpack.config.js配置:
const path = require('path')

module.exports = {
  entry: path.join(__dirname) + '/main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }]
  }
}

Demo5:打包个图片文件

  • main.js
const img1 = document.createElement('img')
img1.src = require('./assets/small.png')
document.body.appendChild(img1)

const img2 = document.createElement('img')
img2.src = require('./assets/big.jpg')
document.body.appendChild(img2)
//body中插入2张图片
  • webpack.config.js
const path = require('path')
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js',
    publicPath: './dist/'//资源路径
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
         options: {
              limit: 8192,
              esModule: false
            } }]}]}}
//"file-loader": "^6.0.0"
//"url-loader": "^4.1.0" 这两个loader的版本都挺高的,阮一峰老师的版本大概是1.几,所以高版本可能有些同样的配置会出现保持

常见报错:

1.图片打包后img中src的路径为[object Module]

这个问题是 file-loader 在 5.0.0 的更新中造成的,5.0.0 默认将 esModule 设置为了 true,这里我们设置回false

url-loader 是对 file-loader 的封装,目的是可以使用 limit 来判断是否把图片编译成 base64 格式,最后还是会调用 file-loader,所以设置 esModule 同样有效。

2.打包后路径问题

根据上面的设置,小于8192字节的,会转换成Data Url形式 data:url...

大于8192B的则会打包成base64格式,也就是一串很长的字符串

<img src="data:image/png;base64,iVBOR...uQmCC">//小图片
<img src="4853ca667a2b8b8844eb2693ac1b2578.png">//大图片

路径出错的话,动态修改下资源文件路径publicPath: './dist/'//资源路径

path:所有输出文件的目标路径;

publicPath:输出解析文件的目录,url 相对于 HTML 页面

区别:
path是webpack所有文件的输出的路径,必须是绝对路径,比如:output输出的js,url-loader解析的图片,HtmlWebpackPlugin生成的html文件,都会存放在以path为基础的目录下( https://www.cnblogs.com/ghost-xyx/p/5812902.html


爬。