Webpack 使用小结

webpack是一款强大的加载器兼打包工具，它能把各种资源，例如JS（包含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理，优势如下：
1.webpack是以commonJS的形式来书写，但对AMD/CMD的支持也很全面，方便旧项目进行代码迁移
2.能不能能不能能不能被模块化的不仅仅是js，还包括各种资源文件
3.开发便捷，能替代部分gulp的工作，比如打包、混淆压缩、图片转base64等
4.扩展性强，插件机制完善，特别是支持React热插拔

下载依赖 webpack解析包 和服务

npm install webpack --save-dev

使用webpack配置文件

• 初始化git

  mkdir webpack-demos
  cd webpack-demos
  git init

• 初始化项目

  npm init -y

• 增加 .gitignore
  • 创建文件

    touch.gitignore

  • 在文件中增加以下内容

    node_modules
    .idea
    lib

• 在项目根目录下创建src和build目录
  src目录存放源码，build目录存放编译打包之后的资源

  mkdir src build

• 创建webpack的配置文件

  touch webpack.config.js

  配置webpack.config.js

  //webpack 必须采用common.js写法
  let path=require('path'); //node里专门处理路径用的，以当前路径解析出一个相对路径
  let HtmlWebpackPlugin=require('html-webpack-plugin');
  module.exports={
    entry:'./src/main.js',//打包的入口文件，webpack会自动查找相关的依赖进行打包,当多个文件的时候用对象 entry:{main:'./src/main.js',main2:'./src/main2.js'},下面的filename:[name].js
    output: {
        filename: "bundle.js" ,//打包后的文件名字
        path:path.resolve('./dist'), //dist必须是一个绝对路径 引入path路径 然后通过path.resolve('./dist')方法解析出一个绝对路径
    },
  //    模块的解析规则 - js 匹配所有的js 用babel-loader转义 排除掉node_modules
    module:{
        rules:[
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
            //数组里的loader顺序是从右往左写
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            //?limit=8192 转化base64 只在8192字节以下转化，其他情况输出图片 file-loader是 url-loader里面的
            {test:/\.(jpg|png|gif)$/,use:'url-loader?limit=8192'},
            {test:/\.(eot|svg|woff|woff2|wtf)$/,use:'url-loader'},
            {test:/\.vue$/,use:'vue-loader'}
        ]
    },
    plugins: [  //自动在dist文件夹里生成index.html
        new HtmlWebpackPlugin({
            template:'./src/index.html', //使用的模板
           // filename:'login.html' //产出的文件名字,不写默认就是index.html
        })
    ]
  }

  注意：webpack.config.js这个文件名是定死的，修改了会报错，另外如果不按这个命名，那么在webpack运行的时候 要通过 --config这个参数指定配置文件：比如：webpack --config conf.js

修改package.json

"scripts":{
   "build":"webpack" 
}

执行命令进行编译

npm run build

build目录下会新增一个bundle.js文件，里面就存放着打包后的目录

loader

anzhuang loader解析器

添加 .babelrc 文件

内容如下

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

devServer

webpack-dev-server 是一个web服务器，可以预览项目，并且当修改源码后可以实时刷新页面server配置

安装devServer

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

修改package.json

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

配置 webpack.config.js

devServer:{
    stats:{colors:true}, //显示颜色
    port:8080, //端口
    contentBase:'build',//指定静态文件的根目录
}

最后一步 执行命令进行启动服务

npm run dev

启动此服务的时候，编译后的产出文件存放在内存里的，在build目录下看不见，但也不会删除原来已经有的文件

《完》

作者：soliderMan
链接：https://juejin.im/post/5a16bdf251882531e9447b57
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。