webpack4.41.0配置一（基礎配置webpack文件，入口出口，實現打包）

1.查看node.js版本、npm版本和webpack版本（使用webpack4時，請確保node.js的版本>=8.9.4）

 

2.我先重新卸載了webpack和webpack-cli(全局)

npm uninstall -g webpack-cli

npm uninstall -g webpack

3.全局安裝webpack-cli和webpack

npm install webpack-cli -g

npm install webpack -g

4.測試一下webpack4的新特性，不用配置入口(默認./src)和出口(默認./dist)

 4.1建立src文件夾並在文件夾中建立兩個js文件，內容任意

4.2之后在終端輸入webpack --mode development（無--mode默認是production,有--mode為開發者模式，文件比較大，方便我們調式，有一些出入日志等功能）

 

 

 然后就自動出現了出口文件夾，但是這只適合於小項目，我們一般還是建議需要配置一下配置文件，因為很多時候我們的項目不一定只有入口和出口的配置，我們可能還需要編譯less,sass,需要支持es6語法等。

5.建立配置文件webpack.config.js並書寫以下內容

const path = require('path');

module.exports = {
    entry:'./input.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'output.bundle.js'
    }
}

 5.1建立input.js入口文件

 5.2終端輸入webpack,出現出口文件dist

 6.更改配置文件，多個入口文件，出口文件與相應的入口文件對應

 進行打包

在出口文件中找不到在入口文件中寫的console.log。因為打包沒有寫--mode默認為生產模式，將我們的調式程序都省略了。如果你換成webpack --mode development,就會看到有console.log。(這就是生產模式和開發模式的區別，開發模式的文件會大很多，所以我們項目最終上線是要打包成生產模式的)。但是我們每次不需要在終端都輸入--mode,只需要在配置文件中設置mode就可以了。

之后在終端輸入webpack也為開發者模式。終端也不會出現黃色的提示了。

以上就是最基礎的webpack打包的配置了

歡迎繼續查看webpack4.41.0配置二（加載器_url-loader/babel-loader/sass-loader）：https://www.cnblogs.com/ahaMOMO/p/11631093.html