webpack从0到1的配置（三）

webpack从0到1的配置(一)

webpack从0到1的配置（二）

• 前端项目总会使用到css，jpg， png这种资源的，按照webpack打包逻辑，我们应该把它们引入到打包入口文件main.js或者main.js引入的文件里。
• 在src下新建assets文件夹，assets目录下新建main.css文件

• main.css里写入

#text-p {
    color: blue;
}

• main.js里修改，把css文件引入进来，删掉text_p.style.color = 'red';

const home_text = require('./home');
+ import './assets/main.css';
const text_p = document.getElementById('text-p');
- text_p.style.color = 'red';
text_p.innerHTML = home_text.text;

• 执行 npm run build
• 结果报错了......
• 因为webpack对静态资源(css文件，图片，视音频，字体文件)的处理需要loader来支持
• 所以 npm install style-loader --save-dev    npm install css-loader --save-dev  
• 如果使用的样式语言是less，对应的应该是less-loader，sass语言对应sass-loader........
• 在webpack.config.js文件里配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
    main: './src/main.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  + module: {
  +  rules: [
  +   {
  +    test: /\.css$/,
  +    use: ['style-loader', 'css-loader']
  +   }]
  + },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'index', // <title>标签的内容
      template: './index.html', // 以哪一个html为模版
    }),
  ]
}

• 执行npm run build, 浏览器打开index.html，可见文字变成了蓝色，但是dist文件夹下依然只有index.html和main.js文件
• 我们想把js文件和css文件打包成一个单独的文件，而不是揉杂在main.js里，怎么办呢？
• 继续看 webpack从0到1的配置（四）