webpack实战

下面是一个实战流程

1.首先初始化

• 1.新建目录，进入目录后初始化npm init -y
• 2.根目录中新建一个default.html文件，一个main.js入口文件，webpack.config.js配置文件
• 3.配置webpack.config.js，简单的入口和出口，如下：
• 4.default.html文件中引入./dist/out.js
• 5.安装依赖yarn add webpack webpack-cli -D
• 6.修改package.json启动命令，加入打包命令"build": "webpack"
  这时候运行yarn build就可以打包了，
  在新生成的dist目录下，就可以看到out.js，运行html文件也可以看到效果

const path = require("path");
module.exports={
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'out.js'
      }
}

2.下面先做html插件

让webpack可以自动找到html文件，并把输出的js插入html

• 1.安装依赖yarn add html-webpack-plugin -D
• 2.引入插件，配置插件如下
• 注意，原来的html，需要去掉引入out.js的部分，title需要这样写
  <title><%= htmlWebpackPlugin.options.title %></title>
  打包后，在dist目录下，就生成了一个新的index.html文件，运行它就能看到效果了

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'out.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "这是webpack生成的title内容",
      template: "./default.html"
    })
  ]
}

3.配置一下热更新

• 1.安装依赖yarn add webpack-dev-server -D
• 2.加入热更新配置
• 3.修改package.json命令，加入启动命令"dev": "webpack-dev-server"
  运行yarn dev就可以看到效果，以后内容有改动，自动打包热更新，直接看效果

devServer: {
    contentBase: './dist',
    open:true,
    port:3030
  }

4.处理css

• 1.yarn add style-loader css-loader
• 2.写一个style.css文件，内容给body加个背景
• 3main.js里面引入css文件import "./css/style.css"

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

接着加入scss处理
安装依赖sass-loader node-sass
新建一个test.scss文件，写上嵌套css内容，并引入js文件里，测试效果
module rules里增加一条规则如下：

{
        test: /\.scss$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "sass-loader"
        }]
      }

5.处理图片

• 1安装依赖file-loader
• 2js里引入图片，创建一个img标签，设置src路径，插入html

import img from "./imgs/open.png"
let imgEle = document.createElement('img');
imgEle.setAttribute('src',img);
document.getElementById('img-wrap').appendChild(imgEle);

{
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
          }
        ]
      }

做到这里，发现scss和file-loader好像有冲突