html引入css webpack_webpack从安装到基本使用讲解

创建一个文件夹，取名为 usewebpack

webpack的安装(在安装webpack之前可以先使用npm init 初始化一下你的项目，会生成package.json说明文件)

1.全局安装webpack (--save-dv 表示安装的是开发时依赖) npm install webpack --save-dv -g

2.局部安装webpack (在文件夹usewebpack中打开终端) npm install webpack --save-dv

3.安装指定版本webpack (npm install webpack@'版本号',安装没有指定版本就是安装的最新版) npm install webpack@3.0.4 --save-dv

如果你想要卸载安装的webpack

局部卸载：npm uninstall webpack 全局卸载：npm uninstall webpack -g

局部安装完成之后会在当前文件夹中生成node_modules文件夹和一个package-lock.json说明文件，package-lock.json描述的是你真实安装的相关文件版本

webpack -v 可以查看你安装的webpack版本

开始使用webpack

1. 在文件夹usewebpack中创建 public和src两个文件夹

2. public文件夹中创建index.html文件，并引入打包后的js文件；src文件夹中创建入口文件main.js或者index.js(根据package.json中的main属性定义)，再创建一个method.js文件

// index.html:                  Document                 // method.js:export let sum = function(num1,num2){  return num1+num2;}// main.js:  import {sum} from './method'  console.log(sum(12,22))

 在文件夹usewebpack中创建webpack.config.js文件

在webpack.config.js 配置文件中配置打包的入口文件(entry)和指定需要打包到哪个地址和打包后的文件名(output)

let path = require('path');//node.js的path模块module.exports = {  entry : './src/main.js',//入口文件  output:{    path: path.resolve(__dirname,'public'),//打包的地址    filename: 'bundle.js'  //打包后的js文件名  },  mode: 'development'//环境申明(开发环境/生产环境)}

在控制台中输入webpack命名进行打包，在public文件夹中会生成 bundle.js，运行index.html文件在浏览器中输出34，即打包成功

loader 的使用

webpack   -loader(webpack本身是不具备处理css能力的，这时就需要使用到webpack提供的loader)只要安装对象loader就可以处理相应的文件了

安装对应loader可以参考

webpack中文网：https://webpack.docschina.org/loaders/ 

官网：https://webpack.js.org/

在src文件夹下中建立css文件夹，并创建common.css文件，在main.js中引入css文件 import './css/common.css'

css引入 (为了可以使用css,webpack需要安装style-loader，和css-loader ，并在webpack.config.js中进行相关配置)

npm install --save-dev style-loader // 安装style-loader npm install --save-dev css-loader // 安装css-loader

webpack.config.js 配置

  module: {    rules: [      {        test: /\.css$/i,        use: ['style-loader', 'css-loader'],//webpack会从右往左开始解析，css-loader是为了识别和引入css文件，style-loader是将样式加载到html文件中，顺序不可以写反      },    ],  },

当我们给body设置一个background-image时，又需要引用到处理图片的loader file-loader，url-loader

npm install url-loader --save-dev   //(加载处理对应图片) npm install file-loader --save-dev   //( 解决CSS等文件中的引入图片路径问题)

在webpack.config.js的modulex属性添加

  {    test: /\.(png|jpg|gif)$/i,    use: [      {        loader: 'url-loader',        options: {          limit: 8192,//图片大小设置，图片小于设置的值的时候会把图片BASE64编码，大于配置的limit参数的时候还是使用file-loader 进行拷贝        },      },    ],  },

图片大于配置的limit值时，webpack会将图片打包到public文件夹中，并且通过hash算法为图片重新进行命名，防止图片名字重复

webpack  插件：plugin的使用

webpack中为了扩充更多功能就会需要使用到许多的第三方插件，而webpack中的plugin就可以帮我们实现，只要安装相应的第三方插件，然后在webpack.config.js文件设置相关配置就可以使用了

例如：

版权声明插件：

在webpack.config.js中引入 const webpack = require('webpack') 然后添加plugins字段即可，在打包的js文件就会生成 /*! 版权所有 */

 plugins:[    new webpack.BannerPlugin('版权所有')  ]

htmlWebpackPlugin 插件：(通过npm安装) npm install --save-dv html-webpack-plugin 这个插件的作用是自动生成一个html文件，也可以根据一个模板来生成一个html文件 开始使用之前先删除在public文件夹中创建的index.html文件，然后在src中创建一个index.html文件作为打包之前的模板

在webpack.config.js中引入 const HtmlWebpackPlugin = require('html-webpack-plugin'); 然后在plugins字段中添加，在打包的thml文件就会生成 ，并且自动将打包的js,css文件添加到html文件当中

plugins:[    new HtmlWebpackPlugin({      template: __dirname + '/src/index.html'  //需要打包的模板地址    })  ]

最终webpack.config.js配置文件代码

const path = require('path');const webpack = require('webpack');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {  entry : './src/main.js',  output:{    path: path.resolve(__dirname,'public'),    filename: 'bundle.js'  },  mode: 'development',  module: {    rules: [      {        test: /\.css$/i,        use: ['style-loader', 'css-loader'],      },      {        test: /\.(png|jpg|gif)$/i,        use: [          {            loader: 'url-loader',            options: {              limit: 8192,            },          },        ],      },    ],  },  plugins:[    new webpack.BannerPlugin('版权所有'),    new HtmlWebpackPlugin({      template: __dirname + '/src/index.html'    })  ]}

文件创建：