webpack学习之路---（1）

webpack的使用在新项目中：
第一步配置 
npm init -y  
出现package.json的配置文件即可成功，先不要使用中文的路径下面容易出问题文件夹的创建为 dist src 同时在src文件夹中放置入口的html文件以及js入口文件
第二步 在全局文件路径下 webpack 加上路径文件名字 以及 打包成功后的名字  （js文件）当然在全局文件中这样的打包有点不太方便我们可以使用的是
npm i webpack-dev-server -d    --自动化编译打包 在装webpack-dev-server的时候本地项目需要依赖 webpack 所以需要
npm i webpack -d  同时编写一个webpack的配置文件 名为 webpack.config.js （在编写webpack.config.js的时候，要注意的是使用的语法为node语法）
第三步编写 webpack.config.js的配置文件  
在刚开始我们并没有提供开始的入口和出口的文件需要我们配置
const path=require('path')
module.exports = {
    entry: path.join( __dirname,'./src/mian.js'), 入口文件  
    output: { 指定输出选项
        filename: "bundle.js", 输出文件的名字
        path: path.join( __dirname,'./dist'), 输出路径
    },
    mode: "development",
    module: {
        rules: []
    },
    plugins: [],
}
第四步在package.json文件中配置一个脚本指令(在scripts中)
 "dev":"webpack-dev-server --open --port 4000 --hot",
同时需要打开浏览配置需要在脚本后面跟上 open ，--port表示的是端口号的更改，hot 热更新   contentbase 设置打开路径
注意：这时候你会发现js没用了，
第五步 npm i  html-webpack-plugin-d
 同时在webpack.config.js中配置一下信息，const htmlwebpackplugin=require('html-webpack-plugin')
注意（作用是在内存中指定我们的模板页面生成内存的首页，同时把打包好的配置js注入到页面底部。
如果要配置插件，需要在导出的对象中，挂载一个plugins）
plugins的配置如下
    plugins: [
        new htmlwebpackplugin({
            template:path.join( __dirname,'./src/mian.js'),//指定模板的文件路径
            filename:"bundle.js"//设置生成内容页面的名称
        })
    ],

第六步
通过es6的语法在main,js的文件中引入一下
import'./css/indenx.css'
同时在npm i style -loader css loader -d
在module中配置一下第三方loader模块
module: { 配置所有的三方loader模块
        rules: [   第三方模块的匹配规则
{
test:/\.css$/, use:[' style-loader','css-loader']用作处理css文件
}

]
    },
在loader中还有 less-loader less -d 处理less的文件