webpack的基本使用

1. 建立项目包含(src,src>index.html,src>main.js)dist目录会自动生成

2. 在该项目中的根目录中执行 (项目名称尽量避免使用中文)

   npm init -y 
   

3. 此时就可以使用全局的webpack来进行打包，此时执行

   webpack .\src\main.js -o .\dist\bundle.js --mode=development
   

   打包成功，要进行自动打包需要进行以下配置

4. 执行

   npm i webpack -D
   

5. 执行

   npm i webpack-dev-server -D
   

6. 在package.json中配置

   "dev": "webpack-dev-server --open --contentBase src"
   

7. 修改index.html中 bundle.js 的路径为根目录

8. 在项目根目录下创建 webpack.config.js，并进行配置

   const path = require('path');
   module.exports = {
   mode: 'development',
   entry: './src/main.js',
   output: {
   	path: path.resolve(__dirname, './dist'),
   	filename: 'bundle.js'
   }
   };
   

9. 执行命令

   npm run dev
   

10. 根据指定的模板页面，生成一份内存中的首页，同时把自动打包好的bundle注入到页面底部，需要进行以下配置

11. 执行

    npm i html-webpack-plugin -D
    

12. 配置插件节点

    const htmlWebpackPlugin = require('html-webpack-plugin');
    plugins: [  // 配置插件的节点
    		new htmlWebpackPlugin({
    			// 创建一个在内存中生成 HTML 页面的插件
    			template: './src/index.html', //指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
    			filename: 'index.html'  // 指定生成页面的名称
    		})
    	]
    

13. 在页面中引入.css样式文件，需要进行以下配置

14. 执行

    npm i style-loader css-loader -D
    

15. 在main.js中引入index.css文件

16. 在webpack.config.js中配置规则

    { test: /\.css$/, use: ['style-loader', 'css-loader']}
    

17. 在页面中引入.less样式文件，需要进行以下配置

18. 执行

    npm i less -D
    

19. 执行

    npm i less-loader -D
    

20. 在main.js中引入index.less文件

21. 在webpack.config.js中配置规则

    { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
    

22. 在页面中引入.scss样式文件，需要进行以下配置

23. 执行

    cnpm i node-sass -D
    

24. 执行

    npm i sass-loader -D
    

25. 在main.js中引入index.scss文件

26. 在webpack.config.js中配置规则

    { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}
    

27. webpack.config.js的配置如下

    const path = require('path');
    // 只要是插件一定要放到 plugins 节点中去
    const htmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
    	mode: 'development',
    	entry: './src/main.js',
    	output: {
    	path: path.resolve(__dirname, './dist'),
    	filename: 'bundle.js'
    },
    plugins: [  // 配置插件的节点
    	new htmlWebpackPlugin({
    		// 创建一个在内存中生成 HTML 页面的插件
    		template: './src/index.html', //指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
    		filename: 'index.html'  // 指定生成页面的名称
    	})
    ],
    module:{  // 这个节点用于配置所有第三方模块加载器
    	rules: [  //所有第三方模块的匹配规则
    		{ test: /\.css$/, use: ['style-loader', 'css-loader']},
    		{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
    		{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}
    	]
    }
    };
    

28. package.json的配置如下：

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --contentBase src"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.2.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.39.1",
    "webpack-dev-server": "^3.8.0"
  }
}

29. main.js 的配置如下;

import './css/index.css';
import './css/index.less';
import './css/index.scss';