webpack常見的配置總結 ---只是一些常見的配置

早期的構建工具grunt ,gulp 

幫助我們配置一些開發環境，省去一些我們調試和重復的工作

現在我們的構建工具一般是webpack ,目前建議大家用3.0以上的版本

現在市場上比較優秀的構建工具，個人認為有2個（大神有不同意的請不要噴我😝）

1-webpack

2-fls3

  fls3是百度提供的前端構建工具，文檔都是中文的，很方便入手，由於我使用vue習慣了

腳手架依賴webpack，所以個人一直使用webpack

 

 

webpack 是一個打包工具（常見的打包）

 打包-------將所以的文件打包成一個（通俗話😁）

使用webpack

 

- 安裝
- 如果安裝全局，可能會導致版本的差異，都安裝到項目開發依賴中
，可以使每個人的版本統一

 

npm install webpack --save-dev

 

- 在package.json中配置腳本

 

scripts:{
"build":"webpack"
}

 

- 執行webpack

 

npm run build

 

- 在當前目錄下新建一個webpack.config.js
- 名字一定是webpack.config.js，不能錯，不能更改
- webpack是基於node語法

 //引進一個node核心模塊path
    let path=require('path');
    module.exports={
        //打包的入口
        entry:"./src/main.js",
        //打包出口
        output:{
            filename:"bundle.js",//打包后的文件名
            //path必須是絕對路徑
            //path.resolve將相對路徑轉絕對路徑
            path:path.resolve('./dist') //打包后文件的路徑
        }
    }

解析es6語法

- babel-core是babel的核心包，使用babel必須安裝
- babel-loade是babel的翻譯官，但是他沒有語法
- 配置轉換es5語法必須要讓babel的翻譯官有語法 babel-preset-es2015

安裝上面的es6解析的包

npm install babel-core babel-loader babel-preset-es2015 --save-dev

配置模塊部分轉換es5語法

- 在當前目錄下新建一個.babelrc文件

{
"presets": ["es2015"]
}

- 第二步在webpack.config.js中增加一個modlue配置
- 在modlue模塊規則rules里配置一條js規則

 

 

 

//模塊配置
        module:{
            //給模塊配置規則
            rules:[
                {
                    //匹配js,使用babel-loade，但不管node_modules目錄下面的
                    //如果用到babel-loader，需要配置babelrc
                    test:/|.js$/,use:'babel-loader',
                    exclude:/node_modules/
                }
            ]
        }

 

解析es7語法

- es2015 stage-3 stage-2 stage-1 stage-0(最高級)

- 先按照依賴包

npm install babel-preset-stage-0 --save-dev

- 在.babelrc文件下增加一個stage-0

{
"presets": ["es2015","stage-0"]
}

解析css 將css看成一個模塊

npm install css-loader style-loader --save-dev

- 在webpack.config.js中模塊module中規則rules里面增加一個css解析配置

{
//將css文件匹配到先解析css 再將css插入到style中，寫法從右往左寫
test:/\.css$/,use:['style-loader','css-loader'],
exclude:/node_modules/
}

解析less文件

npm install less less-loader --save-dev

- 在webpack.config.js中模塊module中規則rules里面增加一個less配置

     {
           //將css文件匹配到先解析css 再將css插入到style中，寫法從右往左寫
           test:/\.less$/,
           //包依賴
           use:['style-loader','css-loader','less-loader'],
           exclude:/node_modules/
    }

解析圖片 一般8k以下才解析base64

- 如果使用js引入圖片，默認不會進行打包文件
- 如果是背景圖片他會去打包
- 在js引用文件，要import 引入圖片
- import img from './1.jpg'

npm install file-loader url-loader --save-dev

- 在webpack.config.js中模塊module中規則rules里面增加一個圖片配置

 

    {
        //將css文件匹配到先解析css 再將css插入到style中，寫法從右往左寫
        test:/\.(png|jpg|gif|woff|svg|eot|woff2|ttf)$/,
        //包依賴 限制8K以上直接輸出文件，以下的base64
        // 8*1024 多少字節
        use:'url-loader?limit=8192',
        exclude:/node_modules/
    }

打包html以src下的html作為模板，將打包后的文件引入

npm install html-webpack-plugin --save-dev

 

npm run build

- 會執行輸出實體文件，項目大時候，速度很慢
- 上線時候才npm run build

npm run dev

- 一般我們會在本地跑一個服務，當文件變化，刷新瀏覽器

npm install webpack-dev-server --save-dev

- 配置webpack里面的dev命令

"scripts": {
"dev":"webpack-dev-server --open"
},

webpack 基礎包總結

 npm install webpack babel-core babel-loader babel-preset-es2015
    babel-preset-stage-0 css-loader style-loader less-loader
    sass-loader less stylus-loader file-loader url-loader html-webpack-plugin 
    webpack-dev-server --save-dev

 

總結就是安裝各種各樣的包,基礎配置沒有什么麻煩，后期也有腳手架，但是基礎配置還是要知道一些

 

如果文章有幫助到您，請點右側的推薦關注哈，O(∩_∩)O謝謝~ >>>>

謝謝大家 😁