2020-04-27

npm install webpack webpack-cli --save-dev

微信截图_20200427121822.png

//package.json
{
  "name": "webpack-basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.5.3",
    "csv-loader": "^3.0.3",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.2.0",
    "raw-loader": "^4.0.1",
    "style-loader": "^1.2.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "xml-loader": "^1.2.1"
  }
}

//webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin}=require('clean-webpack-plugin')
module.exports={
    entry:{
        app:'./src/index.js',
        print:'./src/print.js'    
    },
    plugins:[
        new CleanWebpackPlugin({
            cleanAfterEveryBuildPatterns:['dist'],
        }),
        new HtmlWebpackPlugin({
            title:'webpack output management',
            filename:'admin.html',
            template:'src/index.html'
        })
    ],
    output:{
        filename:"[name].bundle.js",
        path:path.resolve(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:["style-loader","css-loader"],
            },
            {
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    {
                       loader:'file-loader',
                       options:{
                           name:"[name].[ext]",
                           outputPath:"images/",
                       }                        
                    }
                ]
            },
            {
                test:/\.(woff|woff2|eot|ttf|otf)$/,
                use:[  {
                    loader:'file-loader',
                    options:{
                        name:"[name].[ext]",
                        outputPath:"fonts/",
                    }                        
                 }],

            },
            {
                test:/\.(csv|tsv)$/,
                use:"csv-loader",
            },
            {
                test:/\.xml$/,
                use:"xml-loader",
            },
            {
                test:/\.(txt)$/,
                use:"raw-loader",
            },
        ]
    }
}

//index.js
import style from './style.css' 
import Icon from './test.jpg'
import Data from './data.xml'
import txt from './file.txt'
import printMe from './print.js'
// 1. 导入css文件
function component() {    
    var element = document.createElement('div');    
    element.innerHTML=Data.parent._;    
    element.classList.add('color_red') 

    var img = new Image(200,200)
    img.src=Icon
    element.appendChild(img)
    // 2. 添加类名    
    return element;
}
    document.body.appendChild(component());

// console.log(Data.parent._)
// console.log(Icon)
// console.log(style)
// console.log(txt)
printMe()