webpack----前端工程化的解决方案

下载

npm i webpack -S

目录根目录下建立webpack配置文件：webpack.config.js 和脚本文件：webpack.json

// webpack 配置文件
module.exports = {
    mode:'development'   // production  开发模式和发布模式的切换
}

// webpack  脚本文件  webpack.json
"scripts":{
    "dev":"webpack"  // npm run dev 执行
}

webpack的默认约定

默认打包入口文件为：src--》index.js

默认输出文件路径为：dist-》main.js

可以通过entry节点修改默认入口，通过output节点修改默认出口  // 在webpack配置文件中

const path = require('path')
module.exports = {
    entry:path.join(__dirname,'./src/index.js')    // 打包文件路径和文件名
    output:{
        path:path.join(__dirname,'./dist'),   // 输出文件路径
        filename:'bundle.js'     //输出文件名
    }
}

插件

webpack-dev-serve

类似nodemon  自动更新文件变化，不需要重复运行----配置文件必须重新运行

//webpack配置文件修改

"scripts":{
    "dev":"webpack serve"
}

html-webpack-plugin

// webpack 配置文件
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
    template: './src/index.js'  //源文件路径
    filename: './index.js'  // 复制到的路径---内存运行路径
})
module.exports ={
    plugins:[htmlPlugin]
}

loader

webpack只能打包.js文件，需要处理其他文件就需

要其他的loader加载器

// webpack配置文件
module:{
    rules:[
        {test:/\.css$/,use:['style-loader','css-loader']}
    ]
}