webpack配置文件设置

发表于 | 分类于 | | 阅读次数:
字数统计: 904 | 阅读时长 ≈ 4

webpack的核心价值是前端代码的打包，即将前端代码中每一个文件都当成一个pack
然后分析依赖，将其最终打包出线上运行的代码。
Webpack是用于为浏览器构建JavaScript模块脚本的前端工具

创建项目
npm init -y

全局安装
npm install -g webpack

安装到项目内
npm install –save-dev webpack

安装webpack脚手架
npm install -D webpack webpack-cli

安装webpack服务器
npm install -g webpack-dev-server

安装loader
npm install -D style-loader css-loader

四个核心部分

  • entry 规定入口文件，一个或多个
  • output规定输出文件的位置
  • loader各个类型的转换工具
  • plugin打包过程中各种自定义功能的插件

文件内部配置

//导入路径模块
const path = require("path");
module.exports = {
	//所选模式告诉webpack相应地使用其内置优化。
	mode:"production",//生产模式 会默认压缩代码并进行优化（如 tree shaking）
	mode:"development",//开发模式
	mode:"none",//默认模式
    // 入口
    entry: {
     	bundle2:"./App.css",
        bundl:["./main.js","./main1.js","./main.jsx"],
        
    },
    // 出口
    output: {
        // 绝对路径
        filename: '[name].js',
        path:path.resolve(__dirname,"dist")
    },
    filename:"bundle.js",//入口快的文件名模板
    filename:"[name].js",//入口快的文件名模板
    filename:"[chunkhash].js",//入口快的文件名模板
    
    publicPath: "/assets/", // string
    publicPath: "",
    publicPath: "https://cdn.example.com/",
    // 输出解析文件的目录url相对于HTML页面
    // 模块
     library: "MyLibrary", // string,
        libraryTarget: "umd2", // 通用模块定义
        libraryTarget: "commonjs2", // exported with module.exports
        libraryTarget: "commonjs-module", // 使用 module.exports 导出
        libraryTarget: "commonjs", // 作为 exports 的属性导出
        libraryTarget: "amd", // 使用 AMD 定义方法来定义
        libraryTarget: "this", // 在 this 上设置属性
        libraryTarget: "var", // 变量定义于根作用域下
        libraryTarget: "assign", // 盲分配(blind assignment)
        libraryTarget: "window", // 在 window 对象上设置属性
        libraryTarget: "global", // property set to global object
        libraryTarget: "jsonp", // jsonp wrapper
    // 导出库(exported library)的名称
    //模块相关的配置
    module: {
    //模块规则 配置loader 解析器等选项）
        rules:[
            {
            
            // 每个选项都接收一个正则表达式 或字符 匹配条件
            	//正则选择文件 test 或者 include 具有相同的作用
                test:/\.jsx?$/,
                //导入模块
                exclude:/(node_modules)/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets: ['react']
                    }
                }
            },{
                test:/\.css$/,
                use : ['style-loader','css-loader']
            }
        ]
    },
    
    
 
   
    // 插件
    plugins:[],
    // 开发服务器
    devServer:{
        proxy: { // proxy URLs to backend development server
          '/api': 'http://localhost:3000'
        },
        // 模块安装
        // npm install webpack-dev-server --save-dev
        // contentBase: path.resolve(__dirname, 'dist'),
        // host: '192.168.1.9',
        // compress: true, //服务端是否启用压缩
        // port:1717

    }
};

如果导入babel模块之后报错

Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.ou should install 'babel-loader@7'.

以上报错内容出现的原因

bable-loader和babel-core的版本不对应所查询的

babel-loader 8.x对应的是babel-core 7.x

babel-loader 7.x 对应的是babel-core 6.x

查看完版本执行 

npm install --save-dev babel-loader@7.1.5