如何使用webpack获取MDC的捆绑文件?

时间:2019-04-27 06:10:23

标签: npm webpack sass material-design mdc-components

我正在使用用于Web的材料设计组件创建网站。我已经使用 SASS JS

我可以通过webpack服务器成功运行它,但是现在我需要将文件上传到主机。在哪里可以找到webpack制作的捆绑文件? (使用开发服务器时,它们被直接提供给浏览器)

我已经尝试了所有这些

@import “@material/button/mdc-button”;
.foo-button {
@include mdc-button-ink-color(teal);
@include mdc-states(teal);
}
<button class="mdc-button foo-button">BUTTON</button>

请帮助

1 个答案:

答案 0 :(得分:0)

您需要运行

npm run build

检查您的package.json,其中必须包含相应的脚本

"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "webpack --config webpack.config.js"
}

您需要在目录的根目录中具有webpack.config.js文件,并且具有配置。

运行构建时,它将创建目录/ dist,并且捆绑包位于其中。

简单的webpack配置文件:

var path = require('path')
var webpack = require('webpack')
const HTMLWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'build.js'
  },
plugins: [
    new HTMLWebpackPlugin({
      template: "index.html"
    }),
    new CleanWebpackPlugin(['dist'])
  ]
}

在输入时请注意,您的名称和路径可能不同

必须通过npm install命令安装插件。