美文网首页
2018-12-13 ,使用webpack基础

2018-12-13 ,使用webpack基础

作者: ChaliceLee92 | 来源:发表于2018-12-13 21:57 被阅读0次

    1 . 全局安装webpack ,
    终端执行命令 : npm i webpack webpack-cli -g

    1. 创建文件夹,新建一个entry.js 入口文件 ,书写内容

    2. 运行命令 webpack entry.js -o bundle.js --mode=development
      这句命令就是打包这个entry.js文件,会生成一个bundle.js 文件, webpack4.0需要🏠 --mode
      --mode后面的命令是开发环境或者生成环境 prodution
      development和prodution 这两个区别就是一个测试开发环境不会压缩,而生产环境是会压缩文件的

    3. 打包样式 ,需要安装 style-loader 和css-loader ,打包的时候需要运行命令的时候加入!style-loader!css-loader 或者在引入在入口文件引入css文件的时候加入这句代码

    4. 打包的时候使用命令 --progress可以查看进度

    5. 但是按照上面的操作,我们每次执行都要做这些操作很麻烦,所以我们可以配置一个webpack.config.js文件

    module.exports = {
    mode:'development',
    entry: './entry.js',
    output: {
    path: __dirname,
    filename: 'bundle.js'
    },
    module: {
    rules: [
    {test: /.css$/, loader: 'style-loader!css-loader'}
    ]
    }
    }

    注意: 4.0 以后要配置一个mode , 并且 module 不是loader 而是rules了

    相关文章

      网友评论

          本文标题:2018-12-13 ,使用webpack基础

          本文链接:https://www.haomeiwen.com/subject/aglihqtx.html