ifannie

前言:

  webpack 超级实用前端环境搭建

一、我们日常使用的前端开发环境应该是怎样的?

  • 构建我们需要发布的html,css ,js 文件
  • 使用css 预处理器来编写样式
  • 处理压缩图片
  • 使用Bable支持ES新特性
  • 本地提供静态环境开发调试

二、关联HTML

webpack 默认从作为入口的 .js 文件进行构建(更多是基于 SPA 去考虑),但通常一个前端项目都是从一个页面(即 HTML)出发的,最简单的方法是,创建一个 HTML 文件,使用 script 标签直接引用构建好的 JS 文件

<script src="./dist/bundle.js"></script>

但是,如果我们的文件名或者路径会变化,so 我们使用 html-webpack-plugin 插件

html-webpack-plugin 是一个独立的 node package,所以在使用之前我们需要先安装它,把它安装到项目的开发依赖中:

npm install html-webpack-plugin -D

然后在 webpack 配置中,将 html-webpack-plugin 添加到 plugins 列表中:(默认版配置)

cosnt HtmlWebpackPlugin = require(\'html-webpack-plugin\')

module.exports = {
   //...
  Plugins:[
    new   HtmlWebpackPlugin (),
  ]        
}

然而默认配置,并没有什么用哦。这时候我们需要一个实践项目版

const HtmlWebpackPlugin = require(\'html=webpack-plugin\')

module.exports = {
  //...
    Plugins:[
     new HtmlWebpackPlugin ({
          filename:\'index.html\' //配置输出文件名和路径
          template:\'assets/index.html\' ,//配置文件模板
     }),
  ],
}

嘿,我们实际项目怎么可能只有一个HTML文件了。这时候我们再来一个 多个页面版

官方提供的例子是这样的
const HtmlWebpackPlugin = require(\'html=webpack-plugin\')

module.exports = {
  //...
    Plugins:[
     new HtmlWebpackPlugin ({
          filename:\'index.html\' //配置输出文件名和路径
          template:\'assets/index.html\' ,//配置文件模板
     }),
   new HtmlWebpackPlugin ({
          filename:\'address.html\' //配置输出文件名和路径
          template:\'assets/index.html\' ,//配置文件模板
     }),

],

}

到这里,应该满足大部分需求了,但但但是,,,,,, 我还想提供另外一种。

webpack的入口文件是多个的,生成多个HTML文件。不废话 上代码

const HtmlWebpackPlugin = require(\'html-webpack-plugin)

var entries = \'./src/entry/**/**/*.js\'    //多入口文件

//敲黑板
for(var pathname in entries){
    var conf ={
         filename:"dist/pages/"+ pathname + ".html",
         template:\'index.html\'  ,
         hash:false
   }
   webpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
}

三、构建css

嘻嘻,我们在编写css,并且希望使用webpack来进行构建,为此我们需要配置中引入loader来解析和处理css 文件,嘿朋友要记得安装 style-loader和css-loader

 module.exports = {
  module: {
    rules: [
      // ...
      {
        test: /\.css/,
        include: [
          path.resolve(__dirname, \'src\'),
        ],
        use: [
          \'style-loader\',
          \'css-loader\',
        ],
      },
    ],
  }
}

那就创建一个index.css 文件,并在index.js 中引用它,然后进行构建呀

//在index.js 中哦
import \'./index.css\'

发现运行和没有瞧见index.css 啊(有点急人啊)

  • css-loader 负责解析 CSS 代码,主要是为了处理 CSS 中的依赖,例如 @import 和 url() 等引用外部文件的声明;
  • style-loader 会将 css-loader 解析的结果转变成 JS 代码,运行时动态插入 style 标签来让 CSS 代码生效。

经由上述两个 loader 的处理后,CSS 代码会转变为 JS,和 index.js 一起打包了。如果需要单独把 CSS 文件分离出来,我们需要使用 extract-text-webpack-plugin 插件。

const ExtactTextPlugin = reuire(\'extact-text-plugin\')

module.exports = {
     //...
     module:{
          rules:[
              {
                 test:/\.css$/,
                 // 因为这个插件需要干涉模块转换的内容,所以需要要使用它对应的loader
                 use:ExtractTextPlugin.extrract({
                       fallbac:\'style-laoder\',
                       use:\'css-loader\',
                    })
               }
          ]
     },
      plugins:[
       // 引入插件,配置文件名,可以使用hash
           new ExtracttextPlugin(\'index.css\'),
      ],
}                                                        

可要注意了,实际项目不会只有一个css文件呀。

ExtractTextPlugin 对 每个入口 chunk 都生成一个对应的文件,所以当你配置多个入口 chunk 的时候,你必须使用 [name][id] 或 [contenthash]

//贴出官方给的多个实例的代码
const ExtractTextPlugin = require(\'extract-text-webpack-plugin\');

// 创建多个实例
const extractCSS = new ExtractTextPlugin(\'stylesheets/[name]-one.css\');
const extractLESS = new ExtractTextPlugin(\'stylesheets/[name]-two.css\');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: extractCSS.extract([ \'css-loader\', \'postcss-loader\' ])
      },
      {
        test: /\.less$/i,
        use: extractLESS.extract([ \'css-loader\', \'less-loader\' ])
      },
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};

四、css 预处理器

在上述使用 CSS 的基础上,通常我们会使用 Less/Sass 等 CSS 预处理器,webpack 可以通过添加对应的 loader 来支持,以使用 Less 为例,我们可以在官方文档中找到对应的 loader

嘿,我是用less.

那我们在webpack配置中,添加一个支持解析后缀为.less的文件

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.less$/,
        // 因为这个插件需要干涉模块转换的内容,所以需要使用它对应的 loader
        use: ExtractTextPlugin.extract({ 
          fallback: \'style-loader\',
          use: [
            \'css-loader\', 
            \'less-loader\',
          ],
        }), 
      },
    ],
  },
  // ...
}

五、处理图片文件

在前端项目的样式中总会使用到图片,虽然我们已经提到 css-loader 会解析样式中用 url() 引用的文件路径,但是图片对应的 jpg/png/gif 等文件格式,webpack 处理不了。是的,我们只要添加一个处理图片的 loader 配置就可以了,现有的 file-loader 就是个不错的选择。

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: \'file-loader\',
            options: {},
          },
        ],
      },
    ],
  },
}

六、font 类型处理

来来来 说到这里 我说一个坑:升级了element UI 框架 总是报错,我去font 没有处理 

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: \'url-loader\',
        options: {
          limit: 10000,
          name: utils.assetsPath(\'fonts/[name].[hash:7].[ext]\')
          },
        ],
      },
    ],
  },
}

七、使用Babel

Babel 是一个让我们能够使用 ES 新特性的 JS 编译工具,我们可以在 webpack 中配置 Babel,以便使用 ES6、ES7 标准来编写 JS 代码。

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.jsx?/, // 支持 js 和 jsx
        include: [
          path.resolve(__dirname, \'src\'), // src 目录下的才需要经过 babel-loader 处理
        ],
        loader: \'babel-loader\',
      },
    ],
  },
}

八、启动静态服务

我们完成了处理多种文件类型的 webpack 配置。我们可以使用 webpack-dev-server 在本地开启一个简单的静态服务来进行开发

在项目下安装 webpack-dev-server,然后添加启动命令到 package.json 中:

"scripts": {
  "build": "webpack --mode production",
  "start": "webpack-dev-server --mode development"
}

哇,到最后啦

运行 npm run start

http://localhost:8080/

后言:

在多页面项目下使用Webpack+Vue 了解一下,很详细的介绍了每一个配置,我们项目实际开发用到的(剥离,剥离出来)

https://github.com/FannieGirl/Build-a-development-environment  

分类:

技术点:

相关文章: