webpack

单个文件入口的案例

跟随官网的使用教程

1 新建文件夹
2 npm init
3 npm install webpack webpack-cli --save -dev安装 npm i --save odash
4 创建目录(最终目录结构)    
|- package.json    
|- webpack.config.js    
|- /dist        
|- bundle.js        npx webpack --config webpack.config.js  产生        
|- index.html        
|- main.js          npx webpack 产生    
|- /src        
|- index.js    
|- /node_modules    
|- package-lock.json
5 运行
    第一种  npx webpack   在没有配置文件的情况之下使用    
    第二种  npx webpack --config webpack.config.js            
            在有配置文件的情况下使用，默认是webpack.config.js 文件            
            --config 后面可以跟不同的文件名字为了配合不同状态下打包    
    第三种   npm run build            
            在package.json 文件中的 script  中 配置 build 字段就可以使用            
            npm run build  ===  npx webpack --config webpack.config.js
6 对非 js 部分的管理  新增的文件全部放在 src 目录下    
    第一种 css        
        安装 npm install --save-dev style-loader css-loader        
        文件引入  /src/index.js 中 import './style.css'        
        在 webpack.config.js 中添加代码规则        
            module: {            
                rules: [{               
                    test: /\.css\$/,                
                    use: ['style-loader', 'css-loader']            
                }]        
            }      
    第二种  img         
        安装 npm install --save-dev file-loader        
        文件引入  /src/index.js 中 import Dog from './dog.jpg'       
        在 webpack.config.js 中添加代码规则        
            module: {            
                rules: [                
                    {                    
                        test: /\.css\$/,                    
                        use: ['style-loader', 'css-loader']                
                    },                
                    {                    
                        test: /\.(png|svg|jpg|jpeg|gif)$/,                    
                        use: ['file-loader']                
                    }                        
                ]        
            }       
    第三种 字体        
        在css 中定义并且引入        
            @font-face {            
                font-family: 'MyFont';            
                src: ('./ACaslonPro-Bold.otf') format('otf');  // 字体路径             
                font-weight: 600;            
                font-style: normal       
        }        
        div{            
            font-family: 'MyFont'        
        }         
        在 webpack.config.js 中添加代码规则        
            module: {            
                rules: [                              
                    {            
                        test: /\.(woff|woff2|eot|ttf|otf)$/,                    
                        use: ['file-loader']                
                    }                      
                ]        
            }           
        这种方式的好处：        
            不需要依赖于asset 的静态资源存放文件夹        
            可以直接将各自组件所需要的单独木之下，而且在别处引用该组件可以方便的使用。        
            这种配置方式会使你的代码更具备可移植性，因为现有的统一放置的方式会造成所有
            资源紧密耦合在一起。假如你想在另一个项目中使用 /my-component，只需将其复制
            或移动到 /components 目录下。只要你已经安装了任何扩展依赖(external dependencies)，
            并且你已经在配置中定义过相同的 loader，那么项目应该能够良好运行。
   
    注释 $ 在正则中 为匹配输入字符串的结束位置。