webpack.config.js配置信息的说明

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "build/build.js"
  },
  module: {
    loaders: [
       //.css 文件使用 style-loader 和 css-loader 来处理
      { test: /\.css$/, loader: "style!css" },
      //.js 文件使用 jsx-loader 来编译处理
      { test: /\.js$/,    loader: "jsx-loader" }
    ]
  },
  resolve: {
    extensions: [‘‘, ‘.js‘, ‘.jsx‘]
  },
  plugins: []
};

entry: 页面中的入口文件;

output:页面通过webpack打包后生成的目标文件放在什么地方去,我这边是在根目录下生成build文件夹,该文件夹内有一个build.js文件;

resolve:定义了解析模块路径时的配置,常用的就是extensions;可以用来指定模块的后缀,这样在引入模块时就不需要写后缀,全自动实例;

plugins:定义了需要使用的插件,比如commonsPlugin在打包多个入口文件时会提取公用的部分,生成common.js;

module.loaders:是文件的加载器,比如react需要在页面中引入jsx的js源码至页面上来,然后使用该语法,但是通过webpack打包后就不需要再引入JSXTransformer.js;看到上面的加载器;比如jsx-loader加载器就是代表JSXTransformer.js的,还有style-loader和css-loader加载器;因此在使用之前我们需要通过命令把它引入到项目上来

时间: 2024-10-29 06:49:04

webpack.config.js配置信息的说明的相关文章

webpack.config.js====配置babel

参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 等版本的语法转化规则babel-polyfill: es6 内置方法和函数转化垫片babel-plugin-transform-runtime: 避免 polyfill 污染全局变量 cnpm install --save-dev babel-core babel-loader babel-plug

vue-cli的webpack模版,相关配置文件dev-server.js与webpack.config.js配置解析

1.下载vue-cli [html] view plain copy npm install vue-cli -g vue-cli的使用与详细介绍,可以到github上获取https://github.com/vuejs/vue-cli 2.安装webpack项目模版 [html] view plain copy vue init <template-name> <project-name> 比如: [html] view plain copy vue init webpack m

webpack.config.js配置实例

const path = require('path') const HtmlWebPackPlugin = require('html-webpack-plugin') // 导入 在内存中自动生成 index 页面的插件 // 创建一个插件的实例对象 const htmlPlugin = new HtmlWebPackPlugin({ template: path.join(__dirname, './src/index.html'), // 源文件 filename: 'index.htm

webpack.config.js 配置

const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // 入口文件配置 // 值为:对象/字符串 // entry: './src/main.js', entry: { //key: 为输出时的文件名字 // value: 为文件路径 main: './src/main.js' }, // 输出文件配置 output: { path: __dirname+'/dist', //[hash:20]

webpack4.0.1安装问题和webpack.config.js的配置变化

The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. -> When using npm: npm install webpack-cli -D -> When using yarn: yarn add webpack-cli -D webpack4.0.1安装问题,提示: The CLI mov

[转]webpack4.0.1安装问题和webpack.config.js的配置变化

本文转自:https://blog.csdn.net/jiang7701037/article/details/79403637 The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. -> When using npm: npm install webpack-cli -D -> When usi

webpack配置之webpack.config.js文件配置

webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve 1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐的事情.我们尝试用文件的形式将输入输出文件夹配置好.新建一个js文件,并命名为webpack.config.js[目前只能命名为这个,不然程序不识别] webpack.config.js 2.在webpack.config.js文件内输入以下代码 module.exports = { entry: '

webpack前端构建工具学习总结(三)之webpack.config.js配置文件

Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件. webpack文档:https://webpack.github.io/docs/ 1.新建一个文件夹src存放打包前的源文件,dist文件夹存放打包后的文件,新建一个webpack.config.js为webpac

webpack.config.js配置文件

1.基本配置 webpack在执行时,除在命令行传入参数,还可以通过指定的配置文件来执行.默认会搜索当前目录下webpack.config.js.这个文件是一个node.js模块,返回一个json格式的配置对象,或者通过--config选项来指定配置文件. //创建webpack.config.js var webpack = require('webpack'); module.exports = { entry:'./entry.js', //入口文件 output:{ //node.js中